// change to daily view
calendar.changeView('day');

// change to weekly view
calendar.changeView('week');

// change to monthly view
calendar.changeView('month');

calendar.clear();

calendar.createEvents([
  {
    id: '1',
    calendarId: '1',
    title: 'my event',
    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 event',
    category: 'time',
    dueDateClass: '',
    start: '2018-01-18T17:30:00+09:00',
    end: '2018-01-19T17:31:00+09:00',
  },
]);

const element = calendar.getElement(eventId, calendarId);

console.log(element);

const event = calendar.getEvent(eventId, calendarId);

console.log(event.title);

// Move to the next month in month view.
calendar.move(1);

// Move to the next year in month view.
calendar.move(12);

// Move to yesterday in day view.
calendar.move(-1);

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

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

calendar.render();

// Re-render the calendar when resizing a window.
window.addEventListener('resize', () => {
  calendar.render();
});

function onNewEvents(events) {
  calendar.createEvents(events);
  calendar.scrollToNow('smooth');
}

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

calendar.on('clickDayName', (event) => {
  if (calendar.getViewName() === 'week') {
    const dateToMove = new Date(event.date);

    calendar.setDate(dateToMove);
    calendar.changeView('day');
  }
});

calendar.setTheme({
  common: {
    gridSelection: {
      backgroundColor: '#333',
    },
  },
  week: {
    nowIndicatorLabel: {
      color: '#00FF00',
    },
  },
  month: {
    dayName: {
      borderLeft: '1px solid #e5e5e5',
    },
  },
});

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

calendar.on('beforeUpdateEvent', function ({ event, changes }) {
  const { id, calendarId } = event;

  calendar.updateEvent(id, calendarId, changes);
});