{
    "id": "monthly",
    "template": "<div class=\"calendar-month\">\n  <section class=\"calendar-month-header\">\n  <div\n    id=\"selectedMonth\"\n    class=\"calendar-month-header-selected-month\"\n  ></div>\n  </section>\n\n  <ol\n  id=\"daysOfWeek\"\n  class=\"day-of-week\"></ol>\n\n  <ol\n  id=\"calendarDays\"\n  class=\"days-grid\">\n  </ol>\n</div>",
    "css": ":root {\n  --grid-color: #dadada;\n\n  --today-text-color: #fb8100;\n\n  --day-bg-color: #f9f9f9;\n  --day-text-color: #3e4e63;\n  \n  --day-other-month-bg-color: #efefef;\n  --day-other-month-text-color: #3e4e63;\n  \n  --header-bg-color: #f9f9f9;\n  --header-text-color: #3e4e63;\n\n  --weekdays-bg-color: #f9f9f9;\n  --weekdays-text-color: #3e4e63;\n\n  --event-bg-color: transparent;\n  --event-text-color: #3e4e63;\n  \n  --daily-event-bg-color: #4174B5;\n  --daily-event-text-color: #fff;\n  \n  --multi-day-event-bg-color: #4174B5;\n  --multi-day-event-text-color: #fff;\n  \n  --aditional-events-bg-color: #efefef;\n  --aditional-events-text-color: #3e4e63;\n\n  font-size: 16px;\n}\n\n#content {\n  overflow: hidden;\n  height: 100%;\n}\n\nol,\nli {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.calendar-month {\n  position: relative;\n  height: 100%;\n  background-color: var(--day-bg-color);\n}\n\n.calendar-month-header {\n  justify-content: space-between;\n  line-height: 3rem;\n}\n\n.hide-header .calendar-month-header {\n  display: none;\n}\n\n.calendar-month-header-selected-month {\n  font-size: 1.8rem;\n  padding-left: 0.5rem;\n  color: var(--header-text-color);\n  background-color: var(--header-bg-color);\n}\n\n.day-of-week {\n  color: var(--weekdays-text-color);\n  background-color: var(--weekdays-bg-color);\n  font-size: 1.5rem;\n  padding-bottom: 0.25rem;\n  padding-top: 0.75rem;\n  height: 1.75rem;\n}\n\n.day-of-week,\n.days-grid {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n}\n\n.day-of-week > * {\n  text-align: left;\n  overflow: hidden;\n  padding-left: 0.5rem;\n}\n\n.days-grid {\n  height: calc(100% - 5.75rem);\n  position: relative;\n  grid-template-rows: repeat(5, calc(100% / 5));\n  grid-template-columns: repeat(7, calc(100% / 7));\n}\n\n.hide-weekend .days-grid, .hide-weekend .day-of-week {\n  grid-template-columns: repeat(5, 1fr) 0 0;\n}\n\n.hide-header .days-grid {\n  height: calc(100% - 2.75rem);\n}\n\n.calendar-day {\n  position: relative;\n  min-height: 20%;\n  font-size: 1.2rem;\n  color: var(--day-text-color);\n  background-color: var(--day-bg-color);\n  border: 1px solid var(--grid-color);\n}\n\n.calendar-day > span.date {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: absolute;\n  left: 4px;\n  top: 6px;\n}\n\n.calendar-day--not-current {\n  background-color: var(--day-other-month-bg-color);\n  color: var(--day-other-month-text-color);\n}\n\n.calendar-day--today > span.date {\n  font-size: 1.4rem;\n  font-weight: bold;\n  color: var(--today-text-color);\n}\n\n.calendar-events-container {\n  height: calc(100% - 2rem);\n  margin-top: 2rem;\n  font-size: 1.2rem;\n  overflow: hidden;\n}\n\n.calendar-events-container .extra-events {\n  bottom: 1px;\n  opacity: 0.85;\n  z-index: 2;\n  text-align: right;\n  position: absolute;\n  font-weight: bold;\n  background-color: var(--aditional-events-bg-color);\n  color: var(--aditional-events-text-color);\n  width: 100%;\n  font-size: 1.2rem;\n  height: 1.25rem;\n}\n\n.calendar-events-container .extra-events span {\n  padding-right: 6px;\n}\n\n.calendar-event {\n  width: 100%;\n  color: var(--event-text-color);\n  background-color: var(--event-bg-color);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n  padding: 0.25rem 0;\n  height: 1.25rem;\n  line-height: 1em;\n  top: 2rem;\n  z-index: 1;\n}\n\n.calendar-event .event-time {\n  font-size: 1.1rem;\n  margin-left: 0.25rem;\n}\n\n.calendar-event .event-summary {\n  font-size: 1.1rem;\n  margin-left: 0.25rem;\n  font-weight: bold;\n}\n\n.calendar-event.multi-day, .calendar-event.all-day {\n  border-radius: 6px;\n}\n\n.calendar-event.all-day {\n  color: var(--daily-event-text-color);\n  background-color: var(--daily-event-bg-color);\n}\n\n.calendar-event.multi-day {\n  color: var(--multi-day-event-text-color);\n  background-color: var(--multi-day-event-bg-color);\n}\n\n.calendar-event.multi-day.cropped-event-start {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n  margin-left: -2px;\n}\n\n.calendar-event.multi-day.cropped-event-end {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n.calendar-day--not-current .calendar-event {\n  opacity: 0.8;\n}",
    "light": {
        "gridColor": "#dadada",
        "headerBgColor": "#f9f9f9",
        "headerTextColor": "#3e4e63",
        "weekDaysHeaderBgColor": "#f9f9f9",
        "weekDaysHeaderTextColor": "#3e4e63",
        "dayBgColor": "#f9f9f9",
        "dayTextColor": "#3e4e63",
        "todayTextColor": "#fb8100",
        "dayOtherMonthBgColor": "#efefef",
        "dayOtherMonthTextColor": "#3e4e63",
        "eventBgColor": "transparent",
        "eventTextColor": "#3e4e63",
        "dailyEventBgColor": "#4174B5",
        "dailyEventTextColor": "#fff",
        "multiDayEventBgColor": "#4174B5",
        "multiDayEventTextColor": "#fff",
        "aditionalEventsBgColor": "#efefef",
        "aditionalEventsTextColor": "#3e4e63"
    },
    "dark": {
        "gridColor": "#dddddd",
        "headerBgColor": "#404040",
        "headerTextColor": "#ebebeb",
        "weekDaysHeaderBgColor": "#606060",
        "weekDaysHeaderTextColor": "#ebebeb",
        "dayBgColor": "#303030",
        "dayTextColor": "#ebebeb",
        "todayTextColor": "#ff9922",
        "dayOtherMonthBgColor": "#404040",
        "dayOtherMonthTextColor": "#afafaf",
        "eventBgColor": "transparent",
        "eventTextColor": "#edf5ff",
        "dailyEventBgColor": "#bcfbff",
        "dailyEventTextColor": "#454545",
        "multiDayEventBgColor": "#bcfbff",
        "multiDayEventTextColor": "#454545",
        "aditionalEventsBgColor": "#616161",
        "aditionalEventsTextColor": "#eaeaea"
    }
}