definicao de layout

public/assets/js/calendar/app.js

@@ -0,0 +1,447 @@
+'use strict';
+
+/* eslint-disable */
+/* eslint-env jquery */
+/* global moment, tui, chance */
+/* global findCalendar, CalendarList, ScheduleList, generateSchedule */
+
+(function(window, Calendar) {
+    var cal, resizeThrottled;
+    var useCreationPopup = true;
+    var useDetailPopup = true;
+    var datePicker, selectedCalendar;
+
+    cal = new Calendar('#calendar', {
+        defaultView: 'month',
+        useCreationPopup: useCreationPopup,
+        useDetailPopup: useDetailPopup,
+        calendars: CalendarList,
+        template: {
+            milestone: function(model) {
+                return '<span class="calendar-font-icon ic-milestone-b"></span> <span style="background-color: ' + model.bgColor + '">' + model.title + '</span>';
+            },
+            allday: function(schedule) {
+                return getTimeTemplate(schedule, true);
+            },
+            time: function(schedule) {
+                return getTimeTemplate(schedule, false);
+            }
+        }
+    });
+
+    // event handlers
+    cal.on({
+        'clickMore': function(e) {
+            console.log('clickMore', e);
+        },
+        'clickSchedule': function(e) {
+            console.log('clickSchedule', e);
+        },
+        'clickDayname': function(date) {
+            console.log('clickDayname', date);
+        },
+        'beforeCreateSchedule': function(e) {
+            console.log('beforeCreateSchedule', e);
+            saveNewSchedule(e);
+        },
+        'beforeUpdateSchedule': function(e) {
+            var schedule = e.schedule;
+            var changes = e.changes;
+
+            console.log('beforeUpdateSchedule', e);
+
+            if (changes && !changes.isAllDay && schedule.category === 'allday') {
+                changes.category = 'time';
+            }
+
+            cal.updateSchedule(schedule.id, schedule.calendarId, changes);
+            refreshScheduleVisibility();
+        },
+        'beforeDeleteSchedule': function(e) {
+            console.log('beforeDeleteSchedule', e);
+            cal.deleteSchedule(e.schedule.id, e.schedule.calendarId);
+        },
+        'afterRenderSchedule': function(e) {
+            var schedule = e.schedule;
+            // var element = cal.getElement(schedule.id, schedule.calendarId);
+            // console.log('afterRenderSchedule', element);
+        },
+        'clickTimezonesCollapseBtn': function(timezonesCollapsed) {
+            console.log('timezonesCollapsed', timezonesCollapsed);
+
+            if (timezonesCollapsed) {
+                cal.setTheme({
+                    'week.daygridLeft.width': '77px',
+                    'week.timegridLeft.width': '77px'
+                });
+            } else {
+                cal.setTheme({
+                    'week.daygridLeft.width': '60px',
+                    'week.timegridLeft.width': '60px'
+                });
+            }
+
+            return true;
+        }
+    });
+
+    /**
+     * Get time template for time and all-day
+     * @param {Schedule} schedule - schedule
+     * @param {boolean} isAllDay - isAllDay or hasMultiDates
+     * @returns {string}
+     */
+    function getTimeTemplate(schedule, isAllDay) {
+        var html = [];
+        var start = moment(schedule.start.toUTCString());
+        if (!isAllDay) {
+            html.push('<strong>' + start.format('HH:mm') + '</strong> ');
+        }
+        if (schedule.isPrivate) {
+            html.push('<span class="calendar-font-icon ic-lock-b"></span>');
+            html.push(' Private');
+        } else {
+            if (schedule.isReadOnly) {
+                html.push('<span class="calendar-font-icon ic-readonly-b"></span>');
+            } else if (schedule.recurrenceRule) {
+                html.push('<span class="calendar-font-icon ic-repeat-b"></span>');
+            } else if (schedule.attendees.length) {
+                html.push('<span class="calendar-font-icon ic-user-b"></span>');
+            } else if (schedule.location) {
+                html.push('<span class="calendar-font-icon ic-location-b"></span>');
+            }
+            html.push(' ' + schedule.title);
+        }
+
+        return html.join('');
+    }
+
+    /**
+     * A listener for click the menu
+     * @param {Event} e - click event
+     */
+    function onClickMenu(e) {
+        var target = $(e.target).closest('a[role="menuitem"]')[0];
+        var action = getDataAction(target);
+        var options = cal.getOptions();
+        var viewName = '';
+
+        console.log(target);
+        console.log(action);
+        switch (action) {
+            case 'toggle-daily':
+                viewName = 'day';
+                break;
+            case 'toggle-weekly':
+                viewName = 'week';
+                break;
+            case 'toggle-monthly':
+                options.month.visibleWeeksCount = 0;
+                viewName = 'month';
+                break;
+            case 'toggle-weeks2':
+                options.month.visibleWeeksCount = 2;
+                viewName = 'month';
+                break;
+            case 'toggle-weeks3':
+                options.month.visibleWeeksCount = 3;
+                viewName = 'month';
+                break;
+            case 'toggle-narrow-weekend':
+                options.month.narrowWeekend = !options.month.narrowWeekend;
+                options.week.narrowWeekend = !options.week.narrowWeekend;
+                viewName = cal.getViewName();
+
+                target.querySelector('input').checked = options.month.narrowWeekend;
+                break;
+            case 'toggle-start-day-1':
+                options.month.startDayOfWeek = options.month.startDayOfWeek ? 0 : 1;
+                options.week.startDayOfWeek = options.week.startDayOfWeek ? 0 : 1;
+                viewName = cal.getViewName();
+
+                target.querySelector('input').checked = options.month.startDayOfWeek;
+                break;
+            case 'toggle-workweek':
+                options.month.workweek = !options.month.workweek;
+                options.week.workweek = !options.week.workweek;
+                viewName = cal.getViewName();
+
+                target.querySelector('input').checked = !options.month.workweek;
+                break;
+            default:
+                break;
+        }
+
+        cal.setOptions(options, true);
+        cal.changeView(viewName, true);
+
+        setDropdownCalendarType();
+        setRenderRangeText();
+        setSchedules();
+    }
+
+    function onClickNavi(e) {
+        var action = getDataAction(e.target);
+
+        switch (action) {
+            case 'move-prev':
+                cal.prev();
+                break;
+            case 'move-next':
+                cal.next();
+                break;
+            case 'move-today':
+                cal.today();
+                break;
+            default:
+                return;
+        }
+
+        setRenderRangeText();
+        setSchedules();
+    }
+
+    function onNewSchedule() {
+        var title = $('#new-schedule-title').val();
+        var location = $('#new-schedule-location').val();
+        var isAllDay = document.getElementById('new-schedule-allday').checked;
+        var start = datePicker.getStartDate();
+        var end = datePicker.getEndDate();
+        var calendar = selectedCalendar ? selectedCalendar : CalendarList[0];
+
+        if (!title) {
+            return;
+        }
+
+        cal.createSchedules([{
+            id: String(chance.guid()),
+            calendarId: calendar.id,
+            title: title,
+            isAllDay: isAllDay,
+            start: start,
+            end: end,
+            category: isAllDay ? 'allday' : 'time',
+            dueDateClass: '',
+            color: calendar.color,
+            bgColor: calendar.bgColor,
+            dragBgColor: calendar.bgColor,
+            borderColor: calendar.borderColor,
+            raw: {
+                location: location
+            },
+            state: 'Busy'
+        }]);
+
+        $('#modal-new-schedule').modal('hide');
+    }
+
+    function onChangeNewScheduleCalendar(e) {
+        var target = $(e.target).closest('a[role="menuitem"]')[0];
+        var calendarId = getDataAction(target);
+        changeNewScheduleCalendar(calendarId);
+    }
+
+    function changeNewScheduleCalendar(calendarId) {
+        var calendarNameElement = document.getElementById('calendarName');
+        var calendar = findCalendar(calendarId);
+        var html = [];
+
+        html.push('<span class="calendar-bar" style="background-color: ' + calendar.bgColor + '; border-color:' + calendar.borderColor + ';"></span>');
+        html.push('<span class="calendar-name">' + calendar.name + '</span>');
+
+        calendarNameElement.innerHTML = html.join('');
+
+        selectedCalendar = calendar;
+    }
+
+    function createNewSchedule(event) {
+        var start = event.start ? new Date(event.start.getTime()) : new Date();
+        var end = event.end ? new Date(event.end.getTime()) : moment().add(1, 'hours').toDate();
+
+        if (useCreationPopup) {
+            cal.openCreationPopup({
+                start: start,
+                end: end
+            });
+        }
+    }
+    function saveNewSchedule(scheduleData) {
+        var calendar = scheduleData.calendar || findCalendar(scheduleData.calendarId);
+        var schedule = {
+            id: String(chance.guid()),
+            title: scheduleData.title,
+            isAllDay: scheduleData.isAllDay,
+            start: scheduleData.start,
+            end: scheduleData.end,
+            category: scheduleData.isAllDay ? 'allday' : 'time',
+            dueDateClass: '',
+            color: calendar.color,
+            bgColor: calendar.bgColor,
+            dragBgColor: calendar.bgColor,
+            borderColor: calendar.borderColor,
+            location: scheduleData.location,
+            raw: {
+                class: scheduleData.raw['class']
+            },
+            state: scheduleData.state
+        };
+        if (calendar) {
+            schedule.calendarId = calendar.id;
+            schedule.color = calendar.color;
+            schedule.bgColor = calendar.bgColor;
+            schedule.borderColor = calendar.borderColor;
+        }
+
+        cal.createSchedules([schedule]);
+
+        refreshScheduleVisibility();
+    }
+
+    function onChangeCalendars(e) {
+        var calendarId = e.target.value;
+        var checked = e.target.checked;
+        var viewAll = document.querySelector('.lnb-calendars-item input');
+        var calendarElements = Array.prototype.slice.call(document.querySelectorAll('#calendarList input'));
+        var allCheckedCalendars = true;
+
+        if (calendarId === 'all') {
+            allCheckedCalendars = checked;
+
+            calendarElements.forEach(function(input) {
+                var span = input.parentNode;
+                input.checked = checked;
+                span.style.backgroundColor = checked ? span.style.borderColor : 'transparent';
+            });
+
+            CalendarList.forEach(function(calendar) {
+                calendar.checked = checked;
+            });
+        } else {
+            findCalendar(calendarId).checked = checked;
+
+            allCheckedCalendars = calendarElements.every(function(input) {
+                return input.checked;
+            });
+
+            if (allCheckedCalendars) {
+                viewAll.checked = true;
+            } else {
+                viewAll.checked = false;
+            }
+        }
+        refreshScheduleVisibility();
+    }
+    function refreshScheduleVisibility() {
+        var calendarElements = Array.prototype.slice.call(document.querySelectorAll('#calendarList input'));
+        CalendarList.forEach(function(calendar) {
+            cal.toggleSchedules(calendar.id, !calendar.checked, false);
+        });
+        cal.render(true);
+        calendarElements.forEach(function(input) {
+            var span = input.nextElementSibling;
+            span.style.backgroundColor = input.checked ? span.style.borderColor : 'transparent';
+        });
+    }
+    function setDropdownCalendarType() {
+        var calendarTypeName = document.getElementById('calendarTypeName');
+        var calendarTypeIcon = document.getElementById('calendarTypeIcon');
+        var options = cal.getOptions();
+        var type = cal.getViewName();
+        var iconClassName;
+        if (type === 'month') {
+            type = 'Monthly';
+            iconClassName = 'calendar-icon fa fa-th';
+        } else if (type === 'week') {
+            type = 'Weekly';
+            iconClassName = 'calendar-icon fa fa-th-large';
+        } else if (options.month.visibleWeeksCount === 2) {
+            type = '2 weeks';
+            iconClassName = 'calendar-icon fa fa-th-large';
+        } else if (options.month.visibleWeeksCount === 3) {
+            type = '3 weeks';
+            iconClassName = 'calendar-icon fa fa-th-large';
+        } else{
+            type = 'Daily';
+            iconClassName = 'calendar-icon fa fa-bars';
+        }
+
+        calendarTypeName.innerHTML = type;
+        calendarTypeIcon.className = iconClassName;
+    }
+
+    function currentCalendarDate(format) {
+      var currentDate = moment([cal.getDate().getFullYear(), cal.getDate().getMonth(), cal.getDate().getDate()]);
+
+      return currentDate.format(format);
+    }
+
+    function setRenderRangeText() {
+        var renderRange = document.getElementById('renderRange');
+        var options = cal.getOptions();
+        var viewName = cal.getViewName();
+
+        var html = [];
+        if (viewName === 'day') {
+            html.push(currentCalendarDate('YYYY.MM.DD'));
+        } else if (viewName === 'month' &&
+            (!options.month.visibleWeeksCount || options.month.visibleWeeksCount > 4)) {
+            html.push(currentCalendarDate('YYYY.MM'));
+        } else {
+            html.push(moment(cal.getDateRangeStart().getTime()).format('YYYY.MM.DD'));
+            html.push(' ~ ');
+            html.push(moment(cal.getDateRangeEnd().getTime()).format(' MM.DD'));
+        }
+        renderRange.innerHTML = html.join('');
+    }
+
+    function setSchedules() {
+        cal.clear();
+        generateSchedule(cal.getViewName(), cal.getDateRangeStart(), cal.getDateRangeEnd());
+        cal.createSchedules(ScheduleList);
+
+        refreshScheduleVisibility();
+    }
+
+    function setEventListener() {
+        $('#menu-navi').on('click', onClickNavi);
+        $('.dropdown-menu a[role="menuitem"]').on('click', onClickMenu);
+        $('#lnb-calendars').on('change', onChangeCalendars);
+
+        $('#btn-save-schedule').on('click', onNewSchedule);
+        $('#btn-new-schedule').on('click', createNewSchedule);
+
+        $('#dropdownMenu-calendars-list').on('click', onChangeNewScheduleCalendar);
+
+        window.addEventListener('resize', resizeThrottled);
+    }
+
+    function getDataAction(target) {
+        return target.dataset ? target.dataset.action : target.getAttribute('data-action');
+    }
+
+    resizeThrottled = tui.util.throttle(function() {
+        cal.render();
+    }, 50);
+
+    window.cal = cal;
+
+    setDropdownCalendarType();
+    setRenderRangeText();
+    setSchedules();
+    setEventListener();
+})(window, tui.Calendar);
+
+// set calendars
+(function() {
+    var calendarList = document.getElementById('calendarList');
+    var html = [];
+    CalendarList.forEach(function(calendar) {
+        html.push('<div class="lnb-calendars-item"><label>' +
+            '<input type="checkbox" class="tui-full-calendar-checkbox-round" value="' + calendar.id + '" checked>' +
+            '<span style="border-color: ' + calendar.borderColor + '; background-color: ' + calendar.borderColor + ';"></span>' +
+            '<span>' + calendar.name + '</span>' +
+            '</label></div>'
+        );
+    });
+    calendarList.innerHTML = html.join('\n');
+})();

public/assets/js/calendar/calendars.js

@@ -0,0 +1,127 @@
+'use strict';
+
+/* eslint-disable require-jsdoc, no-unused-vars */
+
+var CalendarList = [];
+
+function CalendarInfo() {
+    this.id = null;
+    this.name = null;
+    this.checked = true;
+    this.color = null;
+    this.bgColor = null;
+    this.borderColor = null;
+    this.dragBgColor = null;
+}
+
+function addCalendar(calendar) {
+    CalendarList.push(calendar);
+}
+
+function findCalendar(id) {
+    var found;
+
+    CalendarList.forEach(function(calendar) {
+        if (calendar.id === id) {
+            found = calendar;
+        }
+    });
+
+    return found || CalendarList[0];
+}
+
+function hexToRGBA(hex) {
+    var radix = 16;
+    var r = parseInt(hex.slice(1, 3), radix),
+        g = parseInt(hex.slice(3, 5), radix),
+        b = parseInt(hex.slice(5, 7), radix),
+        a = parseInt(hex.slice(7, 9), radix) / 255 || 1;
+    var rgba = 'rgba(' + r + ', ' + g + ', ' + b + ', ' + a + ')';
+
+    return rgba;
+}
+
+(function() {
+    var calendar;
+    var id = 0;
+
+    calendar = new CalendarInfo();
+    id += 1;
+    calendar.id = String(id);
+    calendar.name = 'My Calendar';
+    calendar.color = '#ffffff';
+    calendar.bgColor = '#24695c';
+    calendar.dragBgColor = '#24695c';
+    calendar.borderColor = '#24695c';
+    addCalendar(calendar);
+
+    calendar = new CalendarInfo();
+    id += 1;
+    calendar.id = String(id);
+    calendar.name = 'Company';
+    calendar.color = '#ffffff';
+    calendar.bgColor = '#ba895d';
+    calendar.dragBgColor = '#ba895d';
+    calendar.borderColor = '#ba895d';
+    addCalendar(calendar);
+
+    calendar = new CalendarInfo();
+    id += 1;
+    calendar.id = String(id);
+    calendar.name = 'Family';
+    calendar.color = '#ffffff';
+    calendar.bgColor = '#ff5583';
+    calendar.dragBgColor = '#ff5583';
+    calendar.borderColor = '#ff5583';
+    addCalendar(calendar);
+
+    calendar = new CalendarInfo();
+    id += 1;
+    calendar.id = String(id);
+    calendar.name = 'Friend';
+    calendar.color = '#ffffff';
+    calendar.bgColor = '#03bd9e';
+    calendar.dragBgColor = '#03bd9e';
+    calendar.borderColor = '#03bd9e';
+    addCalendar(calendar);
+
+    calendar = new CalendarInfo();
+    id += 1;
+    calendar.id = String(id);
+    calendar.name = 'Travel';
+    calendar.color = '#ffffff';
+    calendar.bgColor = '#1b4c43';
+    calendar.dragBgColor = '#1b4c43';
+    calendar.borderColor = '#1b4c43';
+    addCalendar(calendar);
+
+    calendar = new CalendarInfo();
+    id += 1;
+    calendar.id = String(id);
+    calendar.name = 'etc';
+    calendar.color = '#ffffff';
+    calendar.bgColor = '#9d9d9d';
+    calendar.dragBgColor = '#9d9d9d';
+    calendar.borderColor = '#9d9d9d';
+    addCalendar(calendar);
+
+    calendar = new CalendarInfo();
+    id += 1;
+    calendar.id = String(id);
+    calendar.name = 'Birthdays';
+    calendar.color = '#ffffff';
+    calendar.bgColor = '#e2c636';
+    calendar.dragBgColor = '#e2c636';
+    calendar.borderColor = '#e2c636';
+    addCalendar(calendar);
+
+    calendar = new CalendarInfo();
+    id += 1;
+    calendar.id = String(id);
+    calendar.name = 'National Holidays';
+    calendar.color = '#ffffff';
+    calendar.bgColor = '#d22d3d';
+    calendar.dragBgColor = '#d22d3d';
+    calendar.borderColor = '#d22d3d';
+    addCalendar(calendar);
+})();

public/assets/js/calendar/fullcalendar-custom.js

@@ -0,0 +1,644 @@
+"use strict";
+var basic_calendar = {
+    init: function() {
+        $('#cal-basic').fullCalendar({
+            defaultDate: '2016-06-12',
+            editable: true,
+            selectable: true,
+            selectHelper: true,
+            droppable: true,
+            eventLimit: true,
+            select: function(start, end, allDay) {
+                var title = prompt('Event Title:');
+                if (title) {
+                    $('#cal-basic').fullCalendar('renderEvent',
+                    {
+                        title: title,
+                        start: start._d,
+                        end: end._d,
+                        allDay: allDay
+                    },
+                    true
+                    );
+                }
+                $('#cal-basic').fullCalendar('unselect');
+            },
+            events: [
+            {
+                title: 'All Day Event',
+                start: '2016-06-01'
+            },
+            {       
+                title: 'Long Event',
+                start: '2016-06-07',
+                end: '2016-06-10'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2016-06-09T16:00:00'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2016-06-16T16:00:00'
+            },
+            {
+                title: 'Conference',
+                start: '2016-06-11',
+                end: '2016-06-13'
+            },
+            {
+                title: 'Meeting',
+                start: '2016-06-12T10:30:00',
+                end: '2016-06-12T12:30:00'
+            },
+            {
+                title: 'Lunch',
+                start: '2016-06-12T12:00:00'
+            },
+            {
+                title: 'Meeting',
+                start: '2016-06-12T14:30:00'
+            },
+            {
+                title: 'Happy Hour',
+                start: '2016-06-12T17:30:00'
+            },
+            {
+                title: 'Dinner',
+                start: '2016-06-12T20:00:00'
+            },
+            {
+                title: 'Birthday Party',
+                start: '2016-06-13T07:00:00'
+            }
+            ]
+        }), $('#cal-basic-view').fullCalendar({
+            header: {
+            right: 'prev,next today',
+            center: 'title',
+            left: 'month,basicWeek,basicDay'
+            },
+            defaultDate: '2016-06-12',
+            editable: true,
+            droppable: true,
+            eventLimit: true,
+            select: function(start, end, allDay) {
+                var title = prompt('Event Title:');
+                if (title) {
+                    $('#cal-basic-view').fullCalendar('renderEvent',
+                    {
+                        title: title,
+                        start: start._d,
+                        end: end._d,
+                        allDay: allDay
+                    },
+                    true
+                    );
+                }
+                $('#cal-basic-view').fullCalendar('unselect');
+            },
+            events: [
+            {
+                title: 'All Day Event',
+                start: '2016-06-01'
+            },
+            {
+                title: 'Long Event',
+                start: '2016-06-07',
+                end: '2016-06-10'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2016-06-09T16:00:00'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2016-06-16T16:00:00'
+            },
+            {
+                title: 'Conference',
+                start: '2016-06-11',
+                end: '2016-06-13'
+            },
+            {
+                title: 'Meeting',
+                start: '2016-06-12T10:30:00',
+                end: '2016-06-12T12:30:00'
+            },
+            {
+                title: 'Lunch',
+                start: '2016-06-12T12:00:00'
+            },  
+            {
+                title: 'Meeting',
+                start: '2016-06-12T14:30:00'
+            },
+            {
+                title: 'Happy Hour',
+                start: '2016-06-12T17:30:00'
+            },
+            {
+                title: 'Dinner',
+                start: '2016-06-12T20:00:00'
+            },
+            {
+                title: 'Birthday Party',
+                start: '2016-06-13T07:00:00'
+            },
+            {
+                title: 'Click for Google',
+                url: 'http://google.com/',
+                start: '2016-06-28'
+            }
+            ]
+        }), $('#cal-agenda-view').fullCalendar({
+            header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+            },
+            defaultDate: '2016-06-12',
+            defaultView: 'agendaWeek',
+            editable: true,
+            selectable: true,
+            selectHelper: true,
+            droppable: true,
+            eventLimit: true,
+            select: function(start, end, allDay) {
+                var title = prompt('Event Title:');
+                if (title) {
+                    $('#cal-agenda-view').fullCalendar('renderEvent',
+                    {
+                        title: title,
+                        start: start._d,
+                        end: end._d,
+                        allDay: allDay
+                    },
+                    true 
+                    );
+                }
+                $('#cal-agenda-view').fullCalendar('unselect');
+            },
+            events: [
+            {
+                title: 'All Day Event',
+                start: '2016-06-01'
+            },
+            {
+                title: 'Long Event',
+                start: '2016-06-07',
+                end: '2016-06-10'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2016-06-09T16:00:00'
+            },  
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2016-06-16T16:00:00'
+            },
+            {
+                title: 'Conference',
+                start: '2016-06-11',
+                end: '2016-06-13'
+            },
+            {
+                title: 'Meeting',
+                start: '2016-06-12T10:30:00',
+                end: '2016-06-12T12:30:00'
+            },
+            {
+                title: 'Lunch',
+                start: '2016-06-12T12:00:00'
+            },
+            {
+                title: 'Meeting',
+                start: '2016-06-12T14:30:00'
+            },
+            {
+                title: 'Happy Hour',
+                start: '2016-06-12T17:30:00'
+            },
+            {
+                title: 'Dinner',
+                start: '2016-06-12T20:00:00'
+            },
+            {
+                title: 'Birthday Party',
+                start: '2016-06-13T07:00:00'
+            },
+            {
+                title: 'Click for Google',
+                url: 'http://google.com/',
+                start: '2016-06-28'
+            }
+            ]
+        }), $('#cal-bg-events').fullCalendar({
+            header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+            },
+            defaultDate: '2018-02-03',
+            businessHours: true, 
+            editable: true,
+            selectable: true,
+            selectHelper: true,
+            droppable: true,
+            eventLimit: true, 
+            select: function(start, end, allDay) {
+                var title = prompt('Event Title:');
+                if (title) {
+                    $('#cal-bg-events').fullCalendar('renderEvent',
+                    {
+                        title: title,
+                        start: start._d,
+                        end: end._d,
+                        allDay: allDay
+                    },
+                    true
+                    );
+                }
+                $('#cal-bg-events').fullCalendar('unselect');
+            },
+            events: [
+            {
+                title: 'Business Lunch',
+                start: '2018-02-03T16:00:00',
+                constraint: 'businessHours'
+            },
+            {
+                title: 'Meeting',
+                start: '2018-02-13T11:00:00',
+                constraint: 'availableForMeeting', 
+                color: '#ba895d'
+            },
+            {
+                title: 'Conference',
+                start: '2018-02-18',
+                end: '2016-06-20'
+            },
+            {
+                title: 'Party',
+                start: '2018-02-28T20:00:00'
+            },
+            {
+                id: 'availableForMeeting',
+                start: '2018-02-11T10:00:00',
+                end: '2016-02-11T16:00:00',
+                rendering: 'background'
+            },
+            {
+                id: 'availableForMeeting',
+                start: '2018-02-13T10:00:00',
+                end: '2018-02-13T16:00:00',
+                rendering: 'background'
+            },
+            {
+                start: '2018-02-24',
+                end: '2018-02-28',
+                overlap: false,
+                rendering: 'background',
+                color: '#ba895d'
+            },
+            {
+                start: '2018-02-06',
+                end: '2018-02-08',
+                overlap: false,
+                rendering: 'background',
+                color: '#ba895d'
+            }   
+            ]
+        }), $('#cal-event-colors').fullCalendar({
+            header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+            },
+            defaultDate: '2016-06-12',
+            businessHours: true,
+            editable: true,
+            selectable: true,
+            selectHelper: true,
+            droppable: true,
+            eventLimit: true,
+            select: function(start, end, allDay) {
+                var title = prompt('Event Title:');
+                if (title) {
+                    $('#cal-event-colors').fullCalendar('renderEvent',
+                    {
+                        title: title,
+                        start: start._d,
+                        end: end._d,
+                        allDay: allDay
+                    },
+                    true
+                    );
+                }
+                $('#cal-event-colors').fullCalendar('unselect');
+            },
+            events: [
+            {
+                title: 'All Day Event',
+                start: '2016-06-01',
+                color: '#24695c'
+            },
+            {
+                title: 'Long Event',
+                start: '2016-06-07',
+                end: '2016-06-10',
+                color: '#ba895d'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2016-06-09T16:00:00',
+                color: '#ba895d'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2016-06-16T16:00:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Conference',
+                start: '2016-06-11',
+                end: '2016-06-13',
+                color: '#ba895d'
+            },
+            {
+                title: 'Meeting',
+                start: '2016-06-12T10:30:00',
+                end: '2016-06-12T12:30:00',
+                color: '#ba895d'
+            },
+            {
+                title: 'Lunch',
+                start: '2016-06-12T12:00:00',
+                color: '#ba895d'
+            },
+            {
+                title: 'Meeting',
+                start: '2016-06-12T14:30:00',
+                color: '#ba895d'
+            },
+            {
+                title: 'Happy Hour',
+                start: '2016-06-12T17:30:00',
+                color: '#ba895d'
+            },
+            {
+                title: 'Dinner',
+                start: '2016-06-12T20:00:00',
+                color: '#ba895d'
+            },
+            {
+                title: 'Birthday Party',
+                start: '2016-06-13T07:00:00',
+                color: '#ba895d'
+            },
+            {
+                title: 'Click for Google',
+                url: 'http://google.com/',
+                start: '2016-06-28',
+                color: '#22af47'
+            }
+            ]
+        }), $('#external-events .fc-event').each(function() {
+                $(this).css({'backgroundColor': $(this).data('color'), 'borderColor': $(this).data('color')});
+                $(this).data('event', {
+                    title: $.trim($(this).text()), 
+                    color: $(this).data('color'),
+                    stick: true 
+                });
+                $(this).draggable({
+                    zIndex: 999,
+                    revert: true,      
+                    revertDuration: 0  
+                });
+        }), $('#fc-external-drag').fullCalendar({
+            header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+            },
+            editable: true,
+            defaultDate: '2018-06-12',
+            selectable: true,
+            selectHelper: true,
+            droppable: true,
+            eventLimit: true,
+            select: function(start, end, allDay) {
+                var title = prompt('Event Title:');
+                if (title) {
+                    $('#fc-external-drag').fullCalendar('renderEvent',
+                    {
+                        title: title,
+                        start: start._d,
+                        end: end._d,
+                        allDay: allDay
+                    },
+                    true 
+                    );
+                }
+                $('#fc-external-drag').fullCalendar('unselect');
+            },
+            events: [
+            {
+                title: 'All Day Event',
+                start: '2018-06-01',
+                color: '#24695c'
+            },
+            {
+                title: 'Long Event',
+                start: '2018-06-07',
+                end: '2018-06-10',
+                color: '#22af47'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2018-06-09T16:00:00',
+                color: '#22af47'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2018-06-16T16:00:00',
+                color: '#ff9f40'
+            },
+            {
+                title: 'Conference',
+                start: '2018-06-11',
+                end: '2018-06-13',
+                color: '#FF5370'
+            },
+            {
+                title: 'Meeting',
+                start: '2018-06-12T10:30:00',
+                end: '2018-06-12T12:30:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Lunch',
+                start: '2018-06-12T12:00:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Meeting',
+                start: '2018-06-12T14:30:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Happy Hour',
+                start: '2018-06-12T17:30:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Dinner',
+                start: '2018-06-12T20:00:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Birthday Party',
+                start: '2018-06-13T07:00:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Click for Google',
+                url: 'http://google.com/',
+                start: '2018-06-28',
+                color: '#ba895d'
+            }
+            ],
+            drop: function() {
+                if ($('#drop-remove').is(':checked')) {
+                    $(this).remove();
+                }
+            }   
+        }), $('#external-events .fc-event').each(function() {
+                $(this).css({'backgroundColor': $(this).data('color'), 'borderColor': $(this).data('color')});
+                $(this).data('event', {
+                    title: $.trim($(this).text()),
+                    color: $(this).data('color'),
+                    stick: true
+                });
+                $(this).draggable({
+                    zIndex: 999,
+                    revert: true, 
+                    revertDuration: 0 
+                });
+        }), $('#fc-external-drag').fullCalendar({
+            header: {
+            left: 'prev,next today',
+            center: 'title',
+            right: 'month,agendaWeek,agendaDay'
+            },
+            editable: true,
+            defaultDate: '2018-06-12',
+            selectable: true,
+            selectHelper: true,
+            droppable: true,
+            eventLimit: true,
+            select: function(start, end, allDay) {
+                var title = prompt('Event Title:');
+                if (title) {
+                    $('#fc-external-drag').fullCalendar('renderEvent',
+                    {
+                        title: title,
+                        start: start._d,
+                        end: end._d,
+                        allDay: allDay
+                    },
+                    true
+                    );
+                }
+                $('#fc-external-drag').fullCalendar('unselect');
+            },
+            events: [
+            {
+                title: 'All Day Event',
+                start: '2018-06-01',
+                color: '#24695c'
+            },
+            {
+                title: 'Long Event',
+                start: '2018-06-07',
+                end: '2018-06-10',
+                color: '#22af47'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2018-06-09T16:00:00',
+                color: '#22af47'
+            },
+            {
+                id: 999,
+                title: 'Repeating Event',
+                start: '2018-06-16T16:00:00',
+                color: '#ff9f40'
+            },
+            {
+                title: 'Conference',
+                start: '2018-06-11',
+                end: '2018-06-13',
+                color: '#FF5370'
+            },
+            {
+                title: 'Meeting',
+                start: '2018-06-12T10:30:00',
+                end: '2018-06-12T12:30:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Lunch',
+                start: '2018-06-12T12:00:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Meeting',
+                start: '2018-06-12T14:30:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Happy Hour',
+                start: '2018-06-12T17:30:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Dinner',
+                start: '2018-06-12T20:00:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Birthday Party',
+                start: '2018-06-13T07:00:00',
+                color: '#FF5370'
+            },
+            {
+                title: 'Click for Google',
+                url: 'http://google.com/',
+                start: '2018-06-28',
+                color: '#ba895d'
+            }
+            ],
+            drop: function() {
+                if ($('#drop-remove').is(':checked')) {
+                    $(this).remove();
+                }
+            }
+        });
+    }
+};
+(function($) {
+    "use strict";
+    basic_calendar.init()
+})(jQuery);

public/assets/js/calendar/inital.js

@@ -0,0 +1,14 @@
+// (function($) {
+//     "use strict";
+//      var cal = new tui.Calendar('#calendar-monthly', {
+//     defaultView: 'month' // monthly view option
+//   });
+
+
+//        var cal = new tui.Calendar('#calendar', {
+//     defaultView: 'week' // weekly view option
+//   });
+
+
+// })(jQuery);
+

public/assets/js/calendar/schedules.js

@@ -0,0 +1,165 @@
+'use strict';
+
+/*eslint-disable*/
+
+var ScheduleList = [];
+
+var SCHEDULE_CATEGORY = [
+    'milestone',
+    'task'
+];
+
+function ScheduleInfo() {
+    this.id = null;
+    this.calendarId = null;
+
+    this.title = null;
+    this.body = null;
+    this.isAllday = false;
+    this.start = null;
+    this.end = null;
+    this.category = '';
+    this.dueDateClass = '';
+
+    this.color = null;
+    this.bgColor = null;
+    this.dragBgColor = null;
+    this.borderColor = null;
+    this.customStyle = '';
+
+    this.isFocused = false;
+    this.isPending = false;
+    this.isVisible = true;
+    this.isReadOnly = false;
+    this.goingDuration = 0;
+    this.comingDuration = 0;
+    this.recurrenceRule = '';
+    this.state = '';
+
+    this.raw = {
+        memo: '',
+        hasToOrCc: false,
+        hasRecurrenceRule: false,
+        location: null,
+        class: 'public', // or 'private'
+        creator: {
+            name: '',
+            avatar: '',
+            company: '',
+            email: '',
+            phone: ''
+        }
+    };
+}
+
+function generateTime(schedule, renderStart, renderEnd) {
+    var startDate = moment(renderStart.getTime())
+    var endDate = moment(renderEnd.getTime());
+    var diffDate = endDate.diff(startDate, 'days');
+
+    schedule.isAllday = chance.bool({likelihood: 30});
+    if (schedule.isAllday) {
+        schedule.category = 'allday';
+    } else if (chance.bool({likelihood: 30})) {
+        schedule.category = SCHEDULE_CATEGORY[chance.integer({min: 0, max: 1})];
+        if (schedule.category === SCHEDULE_CATEGORY[1]) {
+            schedule.dueDateClass = 'morning';
+        }
+    } else {
+        schedule.category = 'time';
+    }
+
+    startDate.add(chance.integer({min: 0, max: diffDate}), 'days');
+    startDate.hours(chance.integer({min: 0, max: 23}))
+    startDate.minutes(chance.bool() ? 0 : 30);
+    schedule.start = startDate.toDate();
+
+    endDate = moment(startDate);
+    if (schedule.isAllday) {
+        endDate.add(chance.integer({min: 0, max: 3}), 'days');
+    }
+
+    schedule.end = endDate
+        .add(chance.integer({min: 1, max: 4}), 'hour')
+        .toDate();
+
+    if (!schedule.isAllday && chance.bool({likelihood: 20})) {
+        schedule.goingDuration = chance.integer({min: 30, max: 120});
+        schedule.comingDuration = chance.integer({min: 30, max: 120});;
+
+        if (chance.bool({likelihood: 50})) {
+            schedule.end = schedule.start;
+        }
+    }
+}
+
+function generateNames() {
+    var names = [];
+    var i = 0;
+    var length = chance.integer({min: 1, max: 10});
+
+    for (; i < length; i += 1) {
+        names.push(chance.name());
+    }
+
+    return names;
+}
+
+function generateRandomSchedule(calendar, renderStart, renderEnd) {
+    var schedule = new ScheduleInfo();
+
+    schedule.id = chance.guid();
+    schedule.calendarId = calendar.id;
+
+    schedule.title = chance.sentence({words: 3});
+    schedule.body = chance.bool({likelihood: 20}) ? chance.sentence({words: 10}) : '';
+    schedule.isReadOnly = chance.bool({likelihood: 20});
+    generateTime(schedule, renderStart, renderEnd);
+
+    schedule.isPrivate = chance.bool({likelihood: 10});
+    schedule.location = chance.address();
+    schedule.attendees = chance.bool({likelihood: 70}) ? generateNames() : [];
+    schedule.recurrenceRule = chance.bool({likelihood: 20}) ? 'repeated events' : '';
+    schedule.state = chance.bool({likelihood: 20}) ? 'Free' : 'Busy';
+    schedule.color = calendar.color;
+    schedule.bgColor = calendar.bgColor;
+    schedule.dragBgColor = calendar.dragBgColor;
+    schedule.borderColor = calendar.borderColor;
+
+    if (schedule.category === 'milestone') {
+        schedule.color = schedule.bgColor;
+        schedule.bgColor = 'transparent';
+        schedule.dragBgColor = 'transparent';
+        schedule.borderColor = 'transparent';
+    }
+
+    schedule.raw.memo = chance.sentence();
+    schedule.raw.creator.name = chance.name();
+    schedule.raw.creator.avatar = chance.avatar();
+    schedule.raw.creator.company = chance.company();
+    schedule.raw.creator.email = chance.email();
+    schedule.raw.creator.phone = chance.phone();
+
+    if (chance.bool({ likelihood: 20 })) {
+        var travelTime = chance.minute();
+        schedule.goingDuration = travelTime;
+        schedule.comingDuration = travelTime;
+    }
+
+    ScheduleList.push(schedule);
+}
+
+function generateSchedule(viewName, renderStart, renderEnd) {
+    ScheduleList = [];
+    CalendarList.forEach(function(calendar) {
+        var i = 0, length = 10;
+        if (viewName === 'month') {
+            length = 3;
+        } else if (viewName === 'day') {
+            length = 4;
+        }
+        for (; i < length; i += 1) {
+            generateRandomSchedule(calendar, renderStart, renderEnd);
+        }
+    });
+}