Styles

styles provides the ability to override any CSS class in the calendar. You can replace any values with a list of CSS classes.

Below is a list of all default classes.

new Calendar('#calendar', {
  styles: {
    calendar: 'vc',
    controls: 'vc-controls',
    grid: 'vc-grid',
    column: 'vc-column',
    header: 'vc-header',
    headerContent: 'vc-header__content',
    month: 'vc-month',
    year: 'vc-year',
    arrowPrev: 'vc-arrow vc-arrow_prev',
    arrowNext: 'vc-arrow vc-arrow_next',
    wrapper: 'vc-wrapper',
    content: 'vc-content',
    months: 'vc-months',
    monthsMonth: 'vc-months__month',
    years: 'vc-years',
    yearsYear: 'vc-years__year',
    week: 'vc-week',
    weekDay: 'vc-week__day',
    weekNumbers: 'vc-week-numbers',
    weekNumbersTitle: 'vc-week-numbers__title',
    weekNumbersContent: 'vc-week-numbers__content',
    weekNumber: 'vc-week-number',
    dates: 'vc-dates',
    date: 'vc-date',
    dateBtn: 'vc-date__btn',
    datePopup: 'vc-date__popup',
    dateRangeTooltip: 'vc-date-range-tooltip',
    time: 'vc-time',
    timeContent: 'vc-time__content',
    timeHour: 'vc-time__hour',
    timeMinute: 'vc-time__minute',
    timeKeeping: 'vc-time__keeping',
    timeRanges: 'vc-time__ranges',
    timeRange: 'vc-time__range',
  },
});