{
    "id": "weekly",
    "template": "<div class=\"calendar-weekly calendar-container\">\n <ol class=\"hour-grid\"></ol><ol class=\"day-of-week\"></ol>\n  <ol class=\"days-row\"></ol>\n</div>",
    "css": ":root {\n  --grid-color: #dadada;\n  --grid-text-color: #3e4e63;\n  --today-text-color: #fb8100;\n  --now-marker-color: #fb8100;\n  --day-bg-color: #f9f9f9;\n  --day-text-color: #3e4e63;\n  --weekdays-bg-color: #f9f9f9;\n  --weekdays-text-color: #3e4e63;\n  --event-bg-color: #4174b5;\n  --event-text-color: #fff;\n  --daily-event-bg-color: #4174b5;\n  --daily-event-text-color: #fff;\n  --multi-day-event-bg-color: #4174b5;\n  --multi-day-event-text-color: #fff;\n  --aditional-events-bg-color: #efefef;\n  --aditional-events-text-color: #3e4e63;\n  --all-day-events-container-height: 6rem;\n  font-size: 16px;\n}\n\n#content {\n  overflow: hidden;\n  height: 100%;\n}\n\nol, li {\n  padding: 0;\n  margin: 0;\n  list-style: none;\n}\n\n.calendar-weekly {\n  position: relative;\n  height: 100%;\n  background-color: var(--day-bg-color);\n}\n\n.now-marker {\n  position: absolute;\n  background-color: var(--now-marker-color);\n  height: 0.2rem;\n  margin-top: -0.1rem;\n  width: 100%;\n  z-index: 4;\n}\n\n.hour-grid {\n  position: absolute;\n  width: 100%;\n  margin-top: 5rem;\n  height: calc(100% - 5rem);\n  z-index: 1;\n}\n\n.hour-grid .hour-time {\n  line-height: 2px;\n  margin-left: 8px;\n  text-align: right;\n  width: 4rem;\n  color: var(--grid-text-color);\n}\n\n.hour-grid .hour-time:after {\n  border-top: 1px solid var(--grid-color);\n  content: \"\";\n  width: calc(100% - 12px - 4rem);\n  margin-left: 12px;\n  position: absolute;\n  z-index: 1;\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-top: 0.25rem;\n  height: 4.75rem;\n}\n\n.day-of-week, .days-row {\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  margin-left: 6rem;\n}\n\n.hide-weekend .days-row, .hide-weekend .day-of-week {\n  grid-template-columns: repeat(5, 1fr) 0 0;\n}\n\n.day-of-week > li {\n  overflow: hidden;\n  text-align: center;\n}\n\n.day-of-week .week-day-date {\n  font-size: 2.5rem;\n  line-height: 3rem;\n}\n\n.day-of-week>.week-day {\n  margin-top: 10px;\n}\n\n.day-of-week--today .week-day-date {\n  font-weight: bold;\n  color: var(--today-text-color);\n}\n\n.days-row {\n  height: calc(100% - 5rem);\n  position: relative;\n}\n\n.calendar-day {\n  position: relative;\n  font-size: 1.2rem;\n  color: var(--day-text-color);\n  border: 1px solid var(--grid-color);\n}\n\n.calendar-day .calendar-events-container {\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n}\n\n.calendar-day .calendar-all-day-events-container {\n  display: none;\n  height: var(--all-day-events-container-height);\n  font-size: 1.2rem;\n}\n\n.calendar-weekly.show-all-day-events .calendar-day .calendar-events-container {\n  height: calc(100% - var(--all-day-events-container-height));\n}\n\n.calendar-weekly.show-all-day-events .calendar-day .calendar-all-day-events-container {\n  display: block;\n  position: relative;\n}\n\n.calendar-weekly.show-all-day-events .hour-grid {\n  margin-top: calc(5rem + var(--all-day-events-container-height));\n  height: calc(100% - calc(5rem + var(--all-day-events-container-height)));\n}\n\n.calendar-all-day-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-all-day-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  height: 1.25rem;\n  line-height: 1em;\n  z-index: 1;\n  border-radius: 6px;\n  min-height: 1em;\n  display: flex;\n  flex-direction: column;\n}\n\n.calendar-event.before-view {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n\n.calendar-event.concurrent::after {\n  border: 1px solid var(--event-text-color);\n  content: \" \";\n  width: calc(100% - 2px);\n  height: calc(100% - 2px);\n  left: 0px;\n  top: 0px;\n  position: absolute;\n  border-radius: 6px;\n}\n\n.calendar-event.concurrent.level-1 {\n  margin-left: 10%;\n  width: 90%;\n  z-index: 1;\n  filter: brightness(1.05);\n}\n\n.calendar-event.concurrent.level-2 {\n  margin-left: 20%;\n  width: 80%;\n  z-index: 2;\n  filter: brightness(1.1);\n}\n\n.calendar-event.concurrent.level-3 {\n  margin-left: 30%;\n  width: 70%;\n  z-index: 3;\n  filter: brightness(1.15);\n}\n\n.calendar-event.concurrent.level-4 {\n  margin-left: 40%;\n  width: 60%;\n  z-index: 4;\n  filter: brightness(1.2);\n}\n\n.calendar-event.concurrent.level-5 {\n  margin-left: 50%;\n  width: 50%;\n  z-index: 5;\n  filter: brightness(1.25);\n}\n\n.calendar-event.shorter-event {\n  flex-direction: row;\n}\n\n.calendar-event .event-time {\n  font-size: 0.8em;\n  margin-left: 0.25em;\n  margin-top: 2px;\n}\n\n.calendar-event .event-summary {\n  font-size: 0.9em;\n  margin-left: 0.25em;\n  font-weight: bold;\n  margin-top: 2px;\n}\n\n.calendar-event.multi-day, .calendar-event.all-day {\n  flex-direction: row;\n  padding: 0.25rem 0;\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}",
    "light": {
        "gridColor": "#dadada",
        "gridTextColor": "#505050",
        "weekDaysHeaderBgColor": "#f9f9f9",
        "weekDaysHeaderTextColor": "#3e4e63",
        "dayBgColor": "#f9f9f9",
        "dayTextColor": "#3e4e63",
        "todayTextColor": "#e37918",
        "nowMarkerColor": "#e37918",
        "eventBgColor": "#506DC3",
        "eventTextColor": "#fff",
        "dailyEventBgColor": "#4D3394",
        "dailyEventTextColor": "#fff",
        "multiDayEventBgColor": "#452E85",
        "multiDayEventTextColor": "#fff",
        "aditionalEventsBgColor": "#efefef",
        "aditionalEventsTextColor": "#3e4e63"
    },
    "dark": {
        "gridColor": "#545454",
        "gridTextColor": "#bbbbbb",
        "weekDaysHeaderBgColor": "#1e1e1e",
        "weekDaysHeaderTextColor": "#bbbbbb",
        "dayBgColor": "#303030",
        "dayTextColor": "#bbbbbb",
        "todayTextColor": "#ef4050",
        "nowMarkerColor": "#ef4050",
        "eventBgColor": "#d7c9ff",
        "eventTextColor": "#434343",
        "dailyEventBgColor": "#6639eb",
        "dailyEventTextColor": "#e9e9e9",
        "multiDayEventBgColor": "#6639eb",
        "multiDayEventTextColor": "#e9e9e9",
        "aditionalEventsBgColor": "#4b4b4b",
        "aditionalEventsTextColor": "#bbbbbb"
    }
}