how to create an event calendar in javascript

1mobiscroll.settings = {
2    lang: ''
3    theme: 'ios',
4    themeVariant: 'light'
5};
6
7var monthInst,
8    dayInst,
9    popupInst,
10    dateInst,
11    preventSet,
12    allDaySwitch = document.getElementById('allDay'),
13    eventTextInput = document.getElementById('eventText'),
14    eventDescInput = document.getElementById('eventDesc'),
15    now = new Date(),
16    btn = '<button class="mbsc-btn mbsc-btn-outline mbsc-btn-danger md-delete-btn mbsc-ios">Delete</button>',
17    myData = [{
18        start: new Date(now.getFullYear(), now.getMonth(), 8, 13),
19        end: new Date(now.getFullYear(), now.getMonth(), 8, 13, 30),
20        text: 'Lunch @ Butcher\'s' + btn,
21        color: '#26c57d'
22    }, {
23        start: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 15),
24        end: new Date(now.getFullYear(), now.getMonth(), now.getDate(), 16),
25        text: 'General orientation' + btn,
26        color: '#fd966a'
27    }, {
28        start: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 18),
29        end: new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1, 22),
30        text: 'Dexter BD' + btn,
31        color: '#37bbe4'
32    }, {
33        start: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 10, 30),
34        end: new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 11, 30),
35        text: 'Stakeholder mtg.' + btn,
36        color: '#d00f0f'
37    }];
38
39function navigate(inst, val) {
40    if (inst) {
41        inst.navigate(val);
42    }
43}
44
45dateInst = mobiscroll.range('#eventDate', {
46    controls: ['date', 'time'],
47    dateWheels: '|D M d|',
48    endInput: '#endInput',
49    tabs: false,
50    responsive: {
51        large: {
52            touchUi: false
53        }
54    },
55    cssClass: 'md-add-event-range'
56});
57
58dayInst = mobiscroll.eventcalendar('#demo-add-event-day', {
59    display: 'inline',
60    view: {
61        eventList: { type: 'day' }
62    },
63    data: myData,
64    onPageChange: function (event, inst) {
65        var day = event.firstDay;
66        preventSet = true;
67        navigate(monthInst, day);
68        dateInst.setVal([day, new Date(day.getFullYear(), day.getMonth(), day.getDate(), day.getHours() + 2)], true);
69    },
70    onEventSelect: function (event, inst) {
71        if (event.domEvent.target.classList.contains('md-delete-btn')) {
72            mobiscroll.confirm({
73                title: 'Confirm Deletion',
74                message: 'Are you sure you want to delete this item?',
75                okText: 'Delete',
76                callback: function (res) {
77                    if (res) {
78                        inst.removeEvent([event.event._id]);
79                        monthInst.removeEvent([event.event._id]);
80                        mobiscroll.toast({
81                            message: 'Deleted'
82                        });
83                    }
84                }
85            });
86        }
87    }
88});
89
90monthInst = mobiscroll.eventcalendar('#demo-add-event-month', {
91    display: 'inline',
92    view: {
93        calendar: { type: 'month' }
94    },
95    data: myData,
96    onSetDate: function (event, inst) {
97        if (!preventSet) {
98            var day = event.date;
99            navigate(dayInst, day);
100            dateInst.setVal([day, new Date(day.getFullYear(), day.getMonth(), day.getDate(), day.getHours() + 2)], true);
101        }
102        preventSet = false;
103    }
104});
105
106document
107    .getElementById('allDay')
108    .addEventListener('change', function () {
109        var allDay = this.checked;
110
111        dateInst.option({
112            controls: allDay ? ['date'] : ['date', 'time'],
113            dateWheels: (allDay ? 'MM dd yy' : '|D M d|')
114        });
115    });
116
117popupInst = mobiscroll.popup('#demo-add-event-popup', {
118    display: 'center',
119    cssClass: 'mbsc-no-padding',
120    buttons: [{
121            text: 'Add event',
122            handler: 'set'
123        },
124        'cancel'
125    ],
126    headerText: 'Add new event',
127    onSet: function (event, inst) {
128        var eventDates = dateInst.getVal(),
129            events = {
130                start: eventDates[0],
131                end: eventDates[1],
132                text: (eventTextInput.value || 'New Event') + btn,
133                title: eventTextInput.value || 'New Event',
134                description: eventDescInput.value,
135                allDay: allDaySwitch.checked,
136                free: document.querySelector('input[name="free"]:checked').value == 'true'
137            };
138        monthInst.addEvent(events);
139        dayInst.addEvent(events);
140        eventTextInput.value = '';
141        eventDescInput.value = '';
142        // Navigate the calendar to the new event's start date
143        monthInst.navigate(eventDates[0], true);
144    }
145});
146
147document
148    .getElementById('showAddEventPopup')
149    .addEventListener('click', function () {
150        popupInst.show();
151    }, false);