스타일

styles는 캘린더의 어떤 CSS 클래스든 덮어쓸 수 있는 기능을 제공합니다. 각 값을 CSS 클래스 목록으로 교체할 수 있습니다.

아래는 모든 기본 클래스 목록입니다.

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',
  },
});