var timezoneName = moment.tz.guess();
tui.Calendar.setTimezoneOffset(moment.tz.zone(timezoneName).utcOffset(moment()));

var timezoneName = moment.tz.guess();
tui.Calendar.setTimezoneOffsetCallback(function(timestamp) {
     return moment.tz.zone(timezoneName).utcOffset(timestamp));
});

// daily view
calendar.changeView('day', true);

// weekly view
calendar.changeView('week', true);

// monthly view(default 6 weeks view)
calendar.setOptions({month: {visibleWeeksCount: 6}}, true); // or null
calendar.changeView('month', true);

// 2 weeks monthly view
calendar.setOptions({month: {visibleWeeksCount: 2}}, true);
calendar.changeView('month', true);

// 3 weeks monthly view
calendar.setOptions({month: {visibleWeeksCount: 3}}, true);
calendar.changeView('month', true);

// narrow weekend
calendar.setOptions({month: {narrowWeekend: true}}, true);
calendar.setOptions({week: {narrowWeekend: true}}, true);
calendar.changeView(calendar.getViewName(), true);

// change start day of week(from monday)
calendar.setOptions({week: {startDayOfWeek: 1}}, true);
calendar.setOptions({month: {startDayOfWeek: 1}}, true);
calendar.changeView(calendar.getViewName(), true);

// work week
calendar.setOptions({week: {workweek: true}}, true);
calendar.setOptions({month: {workweek: true}}, true);
calendar.changeView(calendar.getViewName(), true);

calendar.clear();
calendar.createSchedules(schedules, true);
calendar.render();

calendar.createSchedules([
    {
        id: '1',
        calendarId: '1',
        title: 'my schedule',
        category: 'time',
        dueDateClass: '',
        start: '2018-01-18T22:30:00+09:00',
        end: '2018-01-19T02:30:00+09:00'
    },
    {
        id: '2',
        calendarId: '1',
        title: 'second schedule',
        category: 'time',
        dueDateClass: '',
        start: '2018-01-18T17:30:00+09:00',
        end: '2018-01-19T17:31:00+09:00'
    }
]);

var element = calendar.getElement(scheduleId, calendarId);
console.log(element);

var schedule = calendar.getSchedule(scheduleId, calendarId);
console.log(schedule.title);

function moveToNextOrPrevRange(val) {
if (val === -1) {
calendar.prev();
} else if (val === 1) {
calendar.next();
}
}

function moveToNextOrPrevRange(val) {
if (val === -1) {
calendar.prev();
} else if (val === 1) {
calendar.next();
}
}

var silent = true;
calendar.clear();
calendar.createSchedules(schedules, silent);
calendar.render();

// Render a calendar when resizing a window.
window.addEventListener('resize', function() {
    calendar.render();
});

function onNewSchedules(schedules) {
    calendar.createSchedules(schedules);
    if (calendar.getViewName() !== 'month') {
        calendar.scrollToNow();
    }
}

calendar.setCalendarColor('1', {
    color: '#e8e8e8',
    bgColor: '#585858',
    borderColor: '#a1b56c'
});
calendar.setCalendarColor('2', {
    color: '#282828',
    bgColor: '#dc9656',
    borderColor: '#a1b56c'
});
calendar.setCalendarColor('3', {
    color: '#a16946',
    bgColor: '#ab4642',
    borderColor: '#a1b56c'
});

calendar.on('clickDayname', function(event) {
    if (calendar.getViewName() === 'week') {
        calendar.setDate(new Date(event.date));
        calendar.changeView('day', true);
    }
});

cal.setTheme({
'month.dayname.height': '31px',
'common.dayname.color': '#333',
'month.dayname.borderBottom': '1px solid #e5e5e5' // Not valid key  will be return.
});

function onClickTodayBtn() {
    calendar.today();
}

// hide those view panel to show only 'Milestone', 'Task'
calendar.toggleScheduleView(false);

// show those view panel.
calendar.toggleScheduleView(true);

// There is no milestone, task, so hide those view panel
calendar.toggleTaskView(false);

// There are some milestone, task, so show those view panel.
calendar.toggleTaskView(true);

calendar.on('beforeUpdateSchedule', function(event) {
    var schedule = event.schedule;
    var startTime = event.start;
    var endTime = event.end;
    calendar.updateSchedule(schedule.id, schedule.calendarId, {
        start: startTime,
        end: endTime
    });
});

calendar.on('afterRenderSchedule', function(event) {
    var schedule = event.schedule;
    var element = calendar.getElement(schedule.id, schedule.calendarId);
    // use the element
    console.log(element);
});

calendar.on('beforeCreateSchedule', function(event) {
    var startTime = event.start;
    var endTime = event.end;
    var isAllDay = event.isAllDay;
    var guide = event.guide;
    var triggerEventName = event.triggerEventName;
    var schedule;

    if (triggerEventName === 'click') {
        // open writing simple schedule popup
        schedule = {...};
    } else if (triggerEventName === 'dblclick') {
        // open writing detail schedule popup
        schedule = {...};
    }

    calendar.createSchedules([schedule]);
});

calendar.on('beforeDeleteSchedule', function(event) {
    var schedule = event.schedule;
    alert('The schedule is removed.', schedule);
});

calendar.on('beforeUpdateSchedule', function(event) {
    var schedule = event.schedule;
    var startTime = event.start;
    var endTime = event.end;

    calendar.updateSchedule(schedule.id, schedule.calendarId, {
        start: startTime,
        end: endTime
    });
});

calendar.on('clickDayname', function(event) {
    if (calendar.getViewName() === 'week') {
        calendar.setDate(new Date(event.date));
        calendar.changeView('day', true);
    }
});

calendar.on('clickMore', function(event) {
    console.log('clickMore', event.date, event.target);
});

calendar.on('clickSchedule', function(event) {
    var schedule = event.schedule;

    if (lastClickSchedule) {
        calendar.updateSchedule(lastClickSchedule.id, lastClickSchedule.calendarId, {
            isFocused: false
        });
    }
    calendar.updateSchedule(schedule.id, schedule.calendarId, {
        isFocused: true
    });

    lastClickSchedule = schedule;
    // open detail view
});

calendar.on('clickTimezonesCollapseBtn', function(timezonesCollapsed) {
    console.log(timezonesCollapsed);
});