Server : Apache/2.4.41 (Ubuntu) System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64 User : www-data ( 33) PHP Version : 7.4.33 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare, Directory :  /var/www/html/libs/absol-card/demo/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

var $ = absol.$;
var _ = absol._;

var beginOfMonth = absol.datetime.beginOfMonth;
var nextDate = absol.datetime.nextDate;
var mDemoDiv = absol.$('.demo');

var firstDaySelect = _({
    tag: 'selectmenu',
    style: {
        verticalAlign: 'middle'
    },
    props: {
        items: [
            {text: 'Sunday', value: 0},
            {text: 'Monday', value: 1}
        ],
        value: 1
    },
    on: {
        change: function () {
            mt.firstDayOfWeek = this.value;
        }
    }
})
var dateInput = _({
    tag: 'dateinput',
    style: {
        'margin-left': '2em',
        verticalAlign: 'middle'
    },
    props: {
        value: new Date()
    },
    on: {
        change: function () {
            mt.focusDate = this.value;
            console.log(mt);

            mt.scrollIntoDate(this.value);
            mt.selectDate(this.value);
        }
    }
});
var mt = _({
    tag: 'weektable',
    style: {
        width: 'calc(100% - var(--scroll-width))',
        height: 'calc(100% - 10px)'
    },
    on:{
        visibleperiodchange: function () {
            var period = mt.getVisiblePeriod();
            console.log(period)
        }
    }
});
var singlePage = _({
    tag: 'singlepage',
    class:'as-viewport-full',
    style:{
        width: '100%',
        height: '100%'
    },
    child:[
        {
            class:'absol-single-page-header',
            child: [
                firstDaySelect,
                dateInput
            ]
        },
        mt
    ]
}).addTo(mDemoDiv);


var activities = [
    {id: "cv_1" ,name: "Công việc 1", startTime: new Date(2020, 3, 16), endTime: new Date(2020, 4, 1), status: 'delay phone'},
    {id: 'cv2_' ,name: "Giao diện", startTime: beginOfMonth(new Date()), endTime: new Date(), status: 'delay'},
    {id: 3, name: "Điện thoại", startTime: new Date(2020, 4, 20), endTime: new Date(2020, 4, 25), status: 'important'},
    {id: 4,name: "Công việc 2", startTime: new Date(), endTime: new Date()},
    {id: 5,name: "Công việc 3", startTime: new Date(2020, 4, 10), endTime: new Date(2020, 4, 23)},
    {id: 6,name: "Công việc 4", startTime: new Date(2020, 3, 29), endTime: new Date(2020, 3, 30), status: 'delay phone'},
    {id: 7,startTime: beginOfMonth(new Date()), endTime: new Date(), status: 'delay'},
    {
        id: 8,
        startTime: new Date(2020, 5, 9),
        endTime: new Date(2020, 5, 11),
        name: "start?"
    },
    {id: 9,startTime: new Date(2020, 4, 20), endTime: new Date(2020, 4, 25), status: 'important'},
    {id: 10,startTime: new Date(), endTime: nextDate(new Date()), status: 'delay phone'},
    {id: 11,startTime: new Date(2020, 4, 10), endTime: new Date(2020, 4, 23), status: 'delay phone'},
    {id: 17, color: 'blue',startTime: new Date(2020, 4, 26, 7), endTime: new Date(2020, 4, 26, 12), status: 'in day ', name:'In-day job'},
    {id: 22, color: 'red',startTime: new Date(2020, 4, 26, 8), endTime: new Date(2020, 4, 26, 13), status: 'in day ', name:'In-day job'},
    {id: 33, color: 'green',startTime: new Date(2020, 4, 26, 9), endTime: new Date(2020, 4, 26, 14), status: 'in day ', name:'In-day job'},
    {
        color: 'red',
        id: 12,startTime: new Date(2020, 4, 26), endTime: new Date(2020, 4, 29), status: 'phone', name: 'Small card',
        quickmenu:{
            menuProps: {
                items:[
                    {text: "Mở", icon: 'span.mdi.mdi-open-in-new'},
                    {text: "Xóa", icon: 'span.mdi.mdi-delete'}
                ]
            },
            onSelect: function (item, act) {

            }
        }
    }
]
mt.firstDayOfWeek = 1;
mt.focusDate = new Date(2020, 4, 26);
dateInput.value = mt.focusDate;
activities.forEach(function (c) {
    mt.addActivity(c)
});
mt.updateCardPosition();
window.mt = mt;