Styles

This page describes how to customize calendar styles by using css class.

// This code follows less-like styles.
.pignose-calendar {
    // The wrapper of calendar (root).

    &.pignose-calendar-{light | dark | blue} {
        // This class describes theme.
    }

    &.pignose-calendar-{default | reverse} {
        // This class describes calendar toggle-type. (reverse type will reverse the UI of status[active, inactive]).
    }

    .pignose-calendar-top {
        // Header of calendar.

        .pignose-calendar-top-nav {
            // Arrow navigation button.

            &.pignose-calendar-top-prev,
            &.pignose-calendar-top-next {
                // The detailed direction of arrow.
            }

            .pignose-calendar-top-icon {
                // Arrow icon in navigation button.
                &.icon-arrow-left,
                &.icon-arrow-right {
                    // The detailed direction of icon.
                }
            }
        }

        .pignose-calendar-top-date {
            // Header title section.

            .pignose-calendar-top-month {
                // Class of month title section.
            }

            .pignose-calendar-top-year {
                // Class of year title section.
            }
        }
    }

    .pignose-calendar-header {
        // This section describes day of week.

        .pignose-calendar-week {
            // Each of week item of header.

            &.pignose-calendar-week-{sun|mon|tue|wed|thu|fri|sat} {
                // Specified day of week item.
            }
        }
    }

    .pignose-calendar-body {
        // Calendar date section.

        .pignose-calendar-row {
            // One line is a weekend.

            .pignose-calendar-unit {
                // Each of date item.

                &.pignose-calendar-unit-{sun|mon|tue|wed|thu|fri|sat} {
                  // Specified a date item.
                }

                &.pignose-calendar-unit-date {
                    // non-empty date item.
                    a {
                        // Real button of date.
                    }

                    .pignose-calendar-button-schedule-container {
                        // This container wrapped events that user defined.

                        .pignose-calendar-button-schedule-pin {
                            // Each of pin of events.

                            &.pignose-calendar-button-schedule-pin-{:eventname} {
                                // You can customize detailed style of event by event name.
                            }
                        }
                    }
                }

                &.pignose-calendar-unit-active {
                    // When date is clicked, and that date turns to active state.

                    &.pignose-calendar-unit-first-active,
                    &.pignose-calendar-unit-last-active {
                        // It describes range type active date.
                    }
                }

                &.pignose-calendar-unit-range {
                    // multiple option is true, its class describes range type activation.

                    &.pignose-calendar-unit-range-first,
                    &.pignose-calendar-unit-range-last {
                        // You can customize the detail of range active UI.
                    }
                }

                &.pignose-calendar-unit-toggle-active {
                    // It works only toggle type calendar, when toggle item is activated.
                }

                &.pignose-calendar-unit-toggle-inactive {
                    // It works only toggle type calendar, when toggle item is inactivated.
                }
            }

            &.pignose-calendar-unit-disabled {
                // The date button is disabled.

                &.pignose-calendar-unit-disabled-weekdays {
                    // It detailed type of disabled class, Only disabledWeeks target.
                }

                &.pignose-calendar-unit-disabled-range {
                    // It detailed type of disabled class, Only disabledRange target.
                    &.pignose-calendar-unit-disabled-multiple-range {
                        // It detailed type of disabled class, Only disabledRanges target.
                    }
                }
            }
        }
    }
}

// Modal, Input type calendar classes.

.pignose-calendar-wrapper {
    // It is a wrapper of modal.
    &.pignose-calendar-wrapper-active {
        // When modal is opened.
    }

    .pignose-calendar-button-group {
        // When buttons option is true, This element will be appeared.

        .pignose-calendar-button {
            // Button for modal.

            &.pignose-calendar-button-cancel {
                // Only cancel button type.
            }

            &.pignose-calendar-button-apply {
                // Only apply button type.
            }
        }
    }
}

.pignose-calendar-wrapper-overlay {
    // Background overlay for modal.

    &.pignose-calendar-wrapper-overlay-active {
        // When modal opened, This class trigger animation fade-in of overlay.
    }
}