diff --git a/README.md b/README.md index 2cb044f..c9e060e 100644 --- a/README.md +++ b/README.md @@ -78,12 +78,13 @@ titleFormat | string | 'MM yyyy' | Date format for calendar title | Date string eventHeaderFormat | string | 'MM d, yyyy' | Date format for calendar event's title | Date string format firstDayOfWeek | number | 0 | Displayed first day of the week | 0 (Sunday) - 6 (Saturday) language | string | 'en' | Calendar's language | en, es, de, pt, fr, nl -todayHighlight | boolean | false | Highlight today's date in calendar | true, false +todayHighlight | boolean | false | Highlight today's date in calendar and displays "Today" text in sidebar | true, false sidebarDisplayDefault | boolean | true | Set default visibility of sidebar | true, false sidebarToggler | boolean | true | Display the button for toggling the sidebar | true, false eventDisplayDefault | boolean | true | Set default visibility of event lists | true, false eventListToggler | boolean | true | Display the button for toggling the event lists | true, false calendarEvents | array | null | Defined events for calendar to show | Array of events +monthNav | boolean | true | displays two buttons before and after calendar title to navigate between months | true, false #### _calendarEvent_ Options Example ```js @@ -124,6 +125,7 @@ selectDate | string | Select date programmatically addCalendarEvent | array/object | Add Calendar event(s) removeCalendarEvent | array/string | Remove event(s) by their id destroy | none | Well.. destroy the calendar +setMonthNav | boolean | show/hide month navigation buttons ##### _addCalendarEvent_ Method Example ```js diff --git a/demo/demo.js b/demo/demo.js index 5b305fd..35bf5c7 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -301,4 +301,7 @@ $('[data-go*="#"]').on("click", function(a) { $("html, body").animate({ scrollTop: c }, 500); +}); +$('#check-month-nav').click(function () { + $("#demoEvoCalendar").evoCalendar("setMonthNav", $('#check-month-nav').is(':checked')); }); \ No newline at end of file diff --git a/evo-calendar/css/evo-calendar.css b/evo-calendar/css/evo-calendar.css index 81c7e66..7bd87bf 100644 --- a/evo-calendar/css/evo-calendar.css +++ b/evo-calendar/css/evo-calendar.css @@ -74,7 +74,7 @@ input:focus, textarea:focus, button:focus { -ms-transform: translate(100%, 0); transform: translate(100%, 0); background-color: #8773c1; - padding: 10px 8px; + padding: 3% 4%; cursor: pointer; -webkit-box-shadow: 5px 0 18px -3px #8773c1; box-shadow: 5px 0 18px -3px #8773c1; @@ -137,6 +137,13 @@ input:focus, textarea:focus, button:focus { .calendar-sidebar > .month-list > .calendar-months > li.active-month { background-color: #755eb5; } +.calendar-sidebar > .month-list > .calendar-months > li > p{ + margin:0 +} +.calendar-sidebar > .month-list > .calendar-months > li:has(p){ +margin: 0; +margin-bottom: 4px; +} .calendar-inner { position: relative; @@ -201,6 +208,31 @@ th[colspan="7"]::after { transform: translateX(-50%); background-color: rgba(135, 115, 193, 0.15); } +th[colspan="7"] div{ + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + align-self: center; +} +th[colspan="7"] div p{ + flex: none; + width: 40%; + padding: 0; + margin: 0; +} +th[colspan="7"] div .icon-button{ + width: fit-content; +} +th[colspan="7"] div .icon-button .chevron-arrow-left, +th[colspan="7"] div .icon-button .chevron-arrow-right +{ + border-right: 4px solid #8773c1; + border-bottom: 4px solid #8773c1; + width: 16px; + height: 16px; +} + tr.calendar-header { } @@ -653,6 +685,9 @@ button.icon-button > span.chevron-arrow-right { width: 275px; padding: 70px 10px 60px 10px; } + th[colspan="7"] div p{ + width: 60%; + } } /* sm */ diff --git a/evo-calendar/css/evo-calendar.midnight-blue.css b/evo-calendar/css/evo-calendar.midnight-blue.css index 23c56ed..e6224fe 100644 --- a/evo-calendar/css/evo-calendar.midnight-blue.css +++ b/evo-calendar/css/evo-calendar.midnight-blue.css @@ -82,6 +82,14 @@ font-size: 30px; color: #00adb5; } +.midnight-blue th[colspan="7"] div .icon-button .chevron-arrow-left, +.midnight-blue th[colspan="7"] div .icon-button .chevron-arrow-right +{ + border-right: 6px solid #00adb5; + border-bottom: 6px solid #027e84; + width: 16px; + height: 16px; +} .midnight-blue th[colspan="7"]::after { content: ''; display: block; diff --git a/evo-calendar/css/evo-calendar.midnight-blue.min.css b/evo-calendar/css/evo-calendar.midnight-blue.min.css index 8d76110..d5700be 100644 --- a/evo-calendar/css/evo-calendar.midnight-blue.min.css +++ b/evo-calendar/css/evo-calendar.midnight-blue.min.css @@ -9,5 +9,4 @@ * Repo: https://github.com/edlynvillegas/evo-calendar * Issues: https://github.com/edlynvillegas/evo-calendar/issues * -*/ -.midnight-blue{-webkit-box-shadow:0 10px 50px -20px rgba(19,31,51,.65);box-shadow:0 10px 50px -20px rgba(19,31,51,.65);border:2px solid #222831;color:#EEE}.midnight-blue .calendar-sidebar{background:#222831;border-right:2px solid #222831;-webkit-box-shadow:0 0 18px -3px rgba(0,0,0,.65);box-shadow:0 0 18px -3px rgba(0,0,0,.65)}.midnight-blue.sidebar-hide .calendar-sidebar{-webkit-box-shadow:none;box-shadow:none}.midnight-blue .calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#cee1ff}.midnight-blue .calendar-sidebar>.month-list>.calendar-months>li{text-transform:uppercase}.midnight-blue .calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:rgba(255,255,255,.2)}.midnight-blue .calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:#00adb5;font-weight:600}.midnight-blue .calendar-sidebar>span#sidebarToggler,.midnight-blue #eventListToggler{background-color:#222831;-webkit-box-shadow:0 0 18px -3px rgba(0,0,0,.65);box-shadow:0 0 18px -3px rgba(0,0,0,.65)}.midnight-blue .calendar-sidebar>span#sidebarToggler{right:-2px}.midnight-blue button.icon-button>span.bars{background-color:#00adb5}.midnight-blue button.icon-button>span.bars::before{background-color:#12cbd4}.midnight-blue button.icon-button>span.bars::after{background-color:#027e84}.midnight-blue .calendar-sidebar>.calendar-year>button.icon-button>span,.midnight-blue button.icon-button>span.chevron-arrow-right{display:block;border-right:6px solid #00adb5;border-bottom:6px solid #027e84}.midnight-blue .calendar-sidebar>.calendar-year>button.icon-button>span{border-width:4px}.midnight-blue .calendar-inner{background-color:#393e46;-webkit-box-shadow:5px 0 18px -3px rgba(0,0,0,.35);box-shadow:5px 0 18px -3px rgba(0,0,0,.35)}.midnight-blue .calendar-inner td{color:#fff}.midnight-blue th[colspan="7"]{position:relative;font-size:30px;color:#00adb5}.midnight-blue th[colspan="7"]::after{content:'';display:block;width:92%;height:1px;margin:0 auto;background:#027e84}.midnight-blue tr.calendar-body .calendar-day .day:hover{background-color:rgba(255,255,255,.12);color:#00f4ff}.midnight-blue tr.calendar-body .calendar-day .day.calendar-today{background:#00adb5}.midnight-blue tr.calendar-body .calendar-day .day{border-width:2px;border-radius:0;color:#fff}.midnight-blue tr.calendar-body .calendar-day .day.calendar-active,.midnight-blue tr.calendar-body .calendar-day .day.calendar-active:hover{border-color:#EEE;color:#EEE}.midnight-blue tr.calendar-body .calendar-day .day.calendar-today:hover{color:#EEE}.midnight-blue .calendar-events{background-color:#192435;padding:70px 20px 60px 20px}.midnight-blue .calendar-events::-webkit-scrollbar-thumb{background:#fff;border-radius:5px}.midnight-blue .calendar-events::-webkit-scrollbar-thumb:hover{background:#cee1ff}.midnight-blue .calendar-events p{color:#EEE}.midnight-blue .calendar-inner::after{background-color:rgba(25,36,53,.65)}.midnight-blue .event-container{border-radius:0}.midnight-blue .event-container:hover{background-color:#5d6979}.midnight-blue .event-container>.event-icon>div{border:2px solid transparent}.midnight-blue .event-container:hover>.event-icon>div{border-color:#fff}.midnight-blue .event-container>.event-icon>div.event-bullet-birthday,.midnight-blue .event-indicator>.type-bullet>div.type-birthday{background-color:#6c72bf}.midnight-blue .event-container>.event-info>p.event-title>span{color:#fff;border-radius:0;background-color:rgba(0,173,181,.15);border:1px solid #00adb5}.midnight-blue .event-container:hover>.event-info>p.event-title>span{background-color:rgb(0 173 181)}.midnight-blue .event-list>.event-empty{background-color:rgba(0,173,181,.15);border:1px solid #00adb5}.midnight-blue .event-list>.event-empty>p{color:#fff}@media only screen and (max-width:768px){.midnight-blue .event-indicator{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.midnight-blue .calendar-events{-webkit-box-shadow:-5px 0 18px -3px rgba(0,0,0,.65);box-shadow:-5px 0 18px -3px rgba(0,0,0,.65)}.midnight-blue.event-hide .calendar-events{-webkit-box-shadow:none;box-shadow:none}}@media screen and (max-width:425px){.midnight-blue .calendar-sidebar{border-right:none}.midnight-blue .calendar-sidebar>.calendar-year{background-color:#222831;-webkit-box-shadow:0 3px 8px -3px rgba(0,0,0,.65);box-shadow:0 3px 8px -3px rgba(0,0,0,.65)}.midnight-blue .calendar-sidebar>.month-list{background-color:#192435}.midnight-blue .calendar-sidebar>span#sidebarToggler{right:0}.midnight-blue #eventListToggler,.midnight-blue .calendar-sidebar>span#sidebarToggler{-webkit-box-shadow:none;box-shadow:none}.midnight-blue .calendar-inner{-webkit-box-shadow:5px 0 18px -3px rgba(0,0,0,.35);box-shadow:0 5px 18px -3px rgba(0,0,0,.65)}.midnight-blue tr.calendar-body .calendar-day .day.calendar-active,.midnight-blue tr.calendar-body .calendar-day .day.calendar-active:hover{border-width:1px}.midnight-blue tr.calendar-body .calendar-day .day.calendar-today .event-indicator{-webkit-transform:translate(-50%,3px);-ms-transform:translate(-50%,3px);transform:translate(-50%,3px)}.midnight-blue tr.calendar-body .calendar-day .day.calendar-active .event-indicator{-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.midnight-blue .event-indicator{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}.midnight-blue .calendar-events{padding:20px 15px}.midnight-blue.event-hide .calendar-events{padding:0 15px}} \ No newline at end of file +*/.midnight-blue{-webkit-box-shadow:0 10px 50px -20px rgba(19,31,51,.65);box-shadow:0 10px 50px -20px rgba(19,31,51,.65);border:2px solid #222831;color:#eee}.midnight-blue .calendar-sidebar{background:#222831;border-right:2px solid #222831;-webkit-box-shadow:0 0 18px -3px rgba(0,0,0,.65);box-shadow:0 0 18px -3px rgba(0,0,0,.65)}.midnight-blue.sidebar-hide .calendar-sidebar{-webkit-box-shadow:none;box-shadow:none}.midnight-blue .calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#cee1ff}.midnight-blue .calendar-sidebar>.month-list>.calendar-months>li{text-transform:uppercase}.midnight-blue .calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:rgba(255,255,255,.2)}.midnight-blue .calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:#00adb5;font-weight:600}.midnight-blue #eventListToggler,.midnight-blue .calendar-sidebar>span#sidebarToggler{background-color:#222831;-webkit-box-shadow:0 0 18px -3px rgba(0,0,0,.65);box-shadow:0 0 18px -3px rgba(0,0,0,.65)}.midnight-blue .calendar-sidebar>span#sidebarToggler{right:-2px}.midnight-blue button.icon-button>span.bars{background-color:#00adb5}.midnight-blue button.icon-button>span.bars::before{background-color:#12cbd4}.midnight-blue button.icon-button>span.bars::after{background-color:#027e84}.midnight-blue .calendar-sidebar>.calendar-year>button.icon-button>span,.midnight-blue button.icon-button>span.chevron-arrow-right{display:block;border-right:6px solid #00adb5;border-bottom:6px solid #027e84}.midnight-blue .calendar-sidebar>.calendar-year>button.icon-button>span{border-width:4px}.midnight-blue .calendar-inner{background-color:#393e46;-webkit-box-shadow:5px 0 18px -3px rgba(0,0,0,.35);box-shadow:5px 0 18px -3px rgba(0,0,0,.35)}.midnight-blue .calendar-inner td{color:#fff}.midnight-blue th[colspan="7"]{position:relative;font-size:30px;color:#00adb5}.midnight-blue th[colspan="7"] div .icon-button .chevron-arrow-left,.midnight-blue th[colspan="7"] div .icon-button .chevron-arrow-right{border-right:6px solid #00adb5;border-bottom:6px solid #027e84;width:16px;height:16px}.midnight-blue th[colspan="7"]::after{content:'';display:block;width:92%;height:1px;margin:0 auto;background:#027e84}.midnight-blue tr.calendar-body .calendar-day .day:hover{background-color:rgba(255,255,255,.12);color:#00f4ff}.midnight-blue tr.calendar-body .calendar-day .day.calendar-today{background:#00adb5}.midnight-blue tr.calendar-body .calendar-day .day{border-width:2px;border-radius:0;color:#fff}.midnight-blue tr.calendar-body .calendar-day .day.calendar-active,.midnight-blue tr.calendar-body .calendar-day .day.calendar-active:hover{border-color:#eee;color:#eee}.midnight-blue .calendar-events p,.midnight-blue tr.calendar-body .calendar-day .day.calendar-today:hover{color:#eee}.midnight-blue .calendar-events{background-color:#192435;padding:70px 20px 60px}.midnight-blue .calendar-events::-webkit-scrollbar-thumb{background:#fff;border-radius:5px}.midnight-blue .calendar-events::-webkit-scrollbar-thumb:hover{background:#cee1ff}.midnight-blue .calendar-inner::after{background-color:rgba(25,36,53,.65)}.midnight-blue .event-container{border-radius:0}.midnight-blue .event-container:hover{background-color:#5d6979}.midnight-blue .event-container>.event-icon>div{border:2px solid transparent}.midnight-blue .event-container:hover>.event-icon>div{border-color:#fff}.midnight-blue .event-container>.event-icon>div.event-bullet-birthday,.midnight-blue .event-indicator>.type-bullet>div.type-birthday{background-color:#6c72bf}.midnight-blue .event-container>.event-info>p.event-title>span{color:#fff;border-radius:0;background-color:rgba(0,173,181,.15);border:1px solid #00adb5}.midnight-blue .event-container:hover>.event-info>p.event-title>span{background-color:rgb(0 173 181)}.midnight-blue .event-list>.event-empty{background-color:rgba(0,173,181,.15);border:1px solid #00adb5}.midnight-blue .event-list>.event-empty>p{color:#ffff}@media only screen and (max-width:768px){.midnight-blue .event-indicator{-webkit-transform:translate(-50%,-100%);-ms-transform:translate(-50%,-100%);transform:translate(-50%,-100%)}.midnight-blue .calendar-events{-webkit-box-shadow:-5px 0 18px -3px rgba(0,0,0,.65);box-shadow:-5px 0 18px -3px rgba(0,0,0,.65)}.midnight-blue.event-hide .calendar-events{-webkit-box-shadow:none;box-shadow:none}}@media screen and (max-width:425px){.midnight-blue .calendar-sidebar{border-right:none}.midnight-blue .calendar-sidebar>.calendar-year{background-color:#222831;-webkit-box-shadow:0 3px 8px -3px rgba(0,0,0,.65);box-shadow:0 3px 8px -3px rgba(0,0,0,.65)}.midnight-blue .calendar-sidebar>.month-list{background-color:#192435}.midnight-blue .calendar-sidebar>span#sidebarToggler{right:0}.midnight-blue #eventListToggler,.midnight-blue .calendar-sidebar>span#sidebarToggler{-webkit-box-shadow:none;box-shadow:none}.midnight-blue .calendar-inner{-webkit-box-shadow:5px 0 18px -3px rgba(0,0,0,.35);box-shadow:0 5px 18px -3px rgba(0,0,0,.65)}.midnight-blue tr.calendar-body .calendar-day .day.calendar-active,.midnight-blue tr.calendar-body .calendar-day .day.calendar-active:hover{border-width:1px}.midnight-blue tr.calendar-body .calendar-day .day.calendar-today .event-indicator{-webkit-transform:translate(-50%,3px);-ms-transform:translate(-50%,3px);transform:translate(-50%,3px)}.midnight-blue tr.calendar-body .calendar-day .day.calendar-active .event-indicator{-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.midnight-blue .event-indicator{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}.midnight-blue .calendar-events{padding:20px 15px}.midnight-blue.event-hide .calendar-events{padding:0 15px}} \ No newline at end of file diff --git a/evo-calendar/css/evo-calendar.min.css b/evo-calendar/css/evo-calendar.min.css index 7a544fd..2523fde 100644 --- a/evo-calendar/css/evo-calendar.min.css +++ b/evo-calendar/css/evo-calendar.min.css @@ -9,5 +9,4 @@ * Repo: https://github.com/edlynvillegas/evo-calendar * Issues: https://github.com/edlynvillegas/evo-calendar/issues * -*/ -*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}html,body{padding:0;margin:0}body{font-family:'Source Sans Pro'}input:focus,textarea:focus,button:focus{outline:none}.evo-calendar{position:relative;background-color:#fbfbfb;color:#5a5a5a;width:100%;-webkit-box-shadow:0 10px 50px -20px #8773c1;box-shadow:0 10px 50px -20px #8773c1;margin:0 auto;overflow:hidden;z-index:1}.calendar-sidebar{position:absolute;margin-top:0;width:200px;height:100%;float:left;background-color:#8773c1;color:#fff;z-index:1;-webkit-box-shadow:5px 0 18px -3px #8773c1;box-shadow:5px 0 18px -3px #8773c1;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);z-index:2}.sidebar-hide .calendar-sidebar{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-box-shadow:none;box-shadow:none}.calendar-sidebar>span#sidebarToggler{position:absolute;width:40px;height:40px;top:0;right:0;-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0);background-color:#8773c1;padding:10px 8px;cursor:pointer;-webkit-box-shadow:5px 0 18px -3px #8773c1;box-shadow:5px 0 18px -3px #8773c1}.calendar-sidebar>.calendar-year{padding:20px;text-align:center}.calendar-sidebar>.calendar-year>p{margin:0;font-size:30px;display:inline-block}.calendar-sidebar>.calendar-year>button.icon-button{display:inline-block;width:20px;height:20px;overflow:visible}.calendar-sidebar>.calendar-year>button.icon-button>span{border-right:4px solid #fff;border-bottom:4px solid #fff;width:100%;height:100%}.calendar-sidebar>.calendar-year>img[year-val="prev"]{float:left}.calendar-sidebar>.calendar-year>img[year-val="next"]{float:right}.calendar-sidebar>.month-list::-webkit-scrollbar{width:5px;height:5px}.calendar-sidebar>.month-list::-webkit-scrollbar-track{background:transparent}.calendar-sidebar>.month-list::-webkit-scrollbar-thumb{background:#fff;border-radius:5px}.calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#d6c8ff}.calendar-sidebar>.month-list>.calendar-months{list-style-type:none;margin:0;padding:0}.calendar-sidebar>.month-list>.calendar-months>li{padding:7px 30px;cursor:pointer;font-size:16px}.calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:#a692e0}.calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:#755eb5}.calendar-inner{position:relative;padding:40px 30px;float:left;width:100%;max-width:calc(100% - 600px);margin-left:200px;background-color:#fff;-webkit-box-shadow:5px 0 18px -3px rgba(0,0,0,.15);box-shadow:5px 0 18px -3px rgba(0,0,0,.15);-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;z-index:1}.calendar-inner::after{content:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(83,74,109,.5)}.sidebar-hide .calendar-inner{max-width:calc(100% - 400px);margin-left:0}.event-hide .calendar-inner{max-width:calc(100% - 200px)}.event-hide.sidebar-hide .calendar-inner{max-width:100%}.calendar-inner .calendar-table{border-collapse:collapse;font-size:20px;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}th[colspan="7"]{position:relative;text-align:center;text-transform:uppercase;font-weight:600;font-size:30px;color:#8773c1}th[colspan="7"]::after{content:'';position:absolute;bottom:-3px;left:50%;width:50px;height:5px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:rgba(135,115,193,.15)}tr.calendar-header .calendar-header-day{padding:10px;text-align:center;color:#5a5a5a}tr.calendar-body .calendar-day{padding:10px 0}tr.calendar-body .calendar-day .day{position:relative;padding:15px;height:60px;width:60px;margin:0 auto;border-radius:50%;text-align:center;color:#5a5a5a;border:1px solid transparent;-webkit-transition:all .3s ease,-webkit-transform .5s ease;transition:all .3s ease,-webkit-transform .5s ease;-o-transition:all .3s ease,transform .5s ease;transition:all .3s ease,transform .5s ease;transition:all .3s ease,transform .5s ease,-webkit-transform .5s ease;cursor:pointer}tr.calendar-body .calendar-day .day:hover{background-color:#dadada}tr.calendar-body .calendar-day .day:active{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}tr.calendar-body .calendar-day .day.calendar-active,tr.calendar-body .calendar-day .day.calendar-active:hover{color:#5a5a5a;border-color:rgba(0,0,0,.5)}tr.calendar-body .calendar-day .day.calendar-today{color:#fff;background-color:#8773c1}tr.calendar-body .calendar-day .day.calendar-today:hover{color:#fff;background-color:#755eb5}tr.calendar-body .calendar-day .day[disabled]{pointer-events:none;cursor:not-allowed;background-color:transparent;color:#b9b9b9}.calendar-events{position:absolute;top:0;right:0;width:400px;height:100%;padding:70px 30px 60px 30px;background-color:#fbfbfb;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;overflow-y:auto;z-index:0}.calendar-events::-webkit-scrollbar{width:5px;height:5px}.calendar-events::-webkit-scrollbar-track{background:transparent}.calendar-events::-webkit-scrollbar-thumb{background:#8e899c;border-radius:5px}.calendar-events::-webkit-scrollbar-thumb:hover{background:#6c6875}.calendar-events>.event-header>p{font-size:30px;font-weight:600;color:#5a5a5a}#eventListToggler{position:absolute;width:40px;height:40px;top:0;right:0;background-color:#8773c1;padding:10px;cursor:pointer;-webkit-box-shadow:5px 0 18px -3px #8773c1;box-shadow:5px 0 18px -3px #8773c1;z-index:1}.event-list::after{content:"";clear:both;display:table}.event-list>.event-empty{padding:15px 10px;background-color:rgba(135,115,193,.15);border:1px solid #8773c1}.event-list>.event-empty>p{margin:0;color:#755eb5}.event-container{position:relative;display:flex;width:100%;border-radius:10px;margin-bottom:10px;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;cursor:pointer;float:left}.event-container::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;transform:translate(29px,30px);background-color:#eaeaea;z-index:-1}.event-container:last-child.event-container::before{height:30px;transform:translate(29px,0)}.event-container:only-child.event-container::before{height:0;opacity:0}.event-container:hover{background-color:#fff;-webkit-box-shadow:0 3px 12px -4px rgba(0,0,0,.65);box-shadow:0 3px 12px -4px rgba(0,0,0,.65)}.event-container>.event-icon{position:relative;padding:20px;width:60px;height:60px;float:left}.event-container>.event-icon>img{width:30px}.event-container>.event-info{align-self:center;width:calc(100% - 60px);display:inline-block;padding:10px 10px 10px 0}.event-container>.event-info>p{margin:0;color:#5a5a5a}.event-container>.event-info>p.event-title{position:relative;font-size:22px;font-weight:600}.event-container>.event-info>p.event-title>span{position:absolute;top:50%;right:0;font-size:12px;font-weight:400;color:#755eb5;border:1px solid #755eb5;border-radius:3px;background-color:rgb(237 234 246);padding:3px 6px;transform:translateY(-50%)}.event-container>.event-info>p.event-desc{font-size:14px;margin-top:5px}.event-indicator{position:absolute;width:-moz-max-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;top:100%;left:50%;-webkit-transform:translate(-50%,calc(-100% + -5px));-ms-transform:translate(-50%,calc(-100% + -5px));transform:translate(-50%,calc(-100% + -5px))}.event-indicator>.type-bullet{float:left;padding:2px}.event-indicator>.type-bullet>div{width:10px;height:10px;border-radius:50%}.event-container>.event-icon>div{width:100%;height:100%;border-radius:50%}.event-container>.event-icon>div[class^="event-bullet-"],.event-indicator>.type-bullet>div[class^="type-"]{background-color:#8773c1}.event-container>.event-icon>div.event-bullet-event,.event-indicator>.type-bullet>div.type-event{background-color:#ff7575}.event-container>.event-icon>div.event-bullet-holiday,.event-indicator>.type-bullet>div.type-holiday{background-color:#ffc107}.event-container>.event-icon>div.event-bullet-birthday,.event-indicator>.type-bullet>div.type-birthday{background-color:#3ca8ff}button.icon-button{border:none;background-color:transparent;width:100%;height:100%;padding:0;cursor:pointer}button.icon-button>span.bars{position:relative;width:100%;height:4px;display:block;background-color:#fff}button.icon-button>span.bars::before,button.icon-button>span.bars::after{content:'';position:absolute;width:100%;height:4px;display:block;background-color:#fff}button.icon-button>span.bars::before{top:-8px}button.icon-button>span.bars::after{bottom:-8px}button.icon-button>span.chevron-arrow-left{display:inline-block;border-right:6px solid #fff;border-bottom:6px solid #fff;width:18px;height:18px;-webkit-transform:rotate(-225deg);-ms-transform:rotate(-225deg);transform:rotate(-225deg)}button.icon-button>span.chevron-arrow-right{display:block;border-right:4px solid #fff;border-bottom:4px solid #fff;width:16px;height:16px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}@media screen and (max-width:1280px){.calendar-inner{padding:50px 20px 70px 20px;max-width:calc(100% - 580px)}.sidebar-hide .calendar-inner{max-width:calc(100% - 380px)}tr.calendar-header .calendar-header-day,tr.calendar-body .calendar-day{padding:10px 5px}.calendar-events{width:380px;padding:70px 20px 60px 20px}}@media screen and (max-width:1024px){.calendar-sidebar{width:175px}.calendar-inner{padding:50px 10px 70px 10px;max-width:calc(100% - 475px);margin-left:175px}.sidebar-hide .calendar-inner{max-width:calc(100% - 300px)}.event-hide .calendar-inner{max-width:calc(100% - 175px)}.calendar-events{width:300px;padding:70px 10px 60px 10px}tr.calendar-body .calendar-day .day{padding:10px;height:45px;width:45px;font-size:16px}.event-indicator>.type-bullet>div{width:8px;height:8px;border-radius:50%}.calendar-sidebar>span#sidebarToggler,#eventListToggler{width:50px;height:50px}#eventListToggler,.event-hide #eventListToggler{right:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}button.icon-button>span.bars{height:5px}button.icon-button>span.bars::before,button.icon-button>span.bars::after{height:5px}button.icon-button>span.bars::before{top:-10px}button.icon-button>span.bars::after{bottom:-10px}button.icon-button>span.chevron-arrow-right{border-right-width:5px;border-bottom-width:5px;width:20px;height:20px}.event-container::before{transform:translate(24px,25px)}.event-container:last-child.event-container::before{height:25px;transform:translate(24px,0)}.event-container>.event-icon{padding:15px;width:50px;height:50px}.event-container>.event-icon::before{left:24px}.event-container>.event-info{width:calc(100% - 50px)}.event-container>.event-info>p{font-size:18px}}@media screen and (max-width:991px){.calendar-sidebar{width:150px}.calendar-inner{padding:50px 10px 70px 10px;max-width:calc(100% - 425px);margin-left:150px}.sidebar-hide .calendar-inner{max-width:calc(100% - 275px)}.event-hide .calendar-inner{max-width:calc(100% - 150px)}.calendar-events{width:275px;padding:70px 10px 60px 10px}}@media screen and (max-width:768px){.calendar-sidebar{width:180px}.calendar-inner{padding:50px 10px 70px 10px;max-width:100%;margin-left:0}.sidebar-hide .calendar-inner,.event-hide .calendar-inner{max-width:100%}.calendar-inner::after{content:'';opacity:1}.sidebar-hide.event-hide .calendar-inner::after{content:none;opacity:0}.event-indicator{-webkit-transform:translate(-50%,calc(-100% + -3px));-ms-transform:translate(-50%,calc(-100% + -3px));transform:translate(-50%,calc(-100% + -3px))}.event-indicator>.type-bullet{padding:0 1px 3px 1px}.calendar-events{width:48%;padding:70px 20px 60px 20px;-webkit-box-shadow:-5px 0 18px -3px rgba(135,115,193,.5);box-shadow:-5px 0 18px -3px rgba(135,115,193,.5);z-index:1}.event-hide .calendar-events{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-box-shadow:none;box-shadow:none}#eventListToggler{right:48%;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.event-hide #eventListToggler{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.calendar-events>.event-list{margin-top:20px}.calendar-sidebar>.calendar-year>button.icon-button{width:16px;height:16px}.calendar-sidebar>.calendar-year>button.icon-button>span{border-right-width:2px;border-bottom-width:2px}.calendar-sidebar>.calendar-year>p{font-size:22px}.calendar-sidebar>.month-list>.calendar-months>li{padding:6px 26px}.calendar-events>.event-header>p{margin:0}.event-container>.event-info>p.event-title{font-size:20px}.event-container>.event-info>p.event-desc{font-size:12px}}@media screen and (max-width:768px) and (min-width:426px){.event-container>.event-info>p.event-title{font-size:18px}}@media screen and (max-width:425px){.calendar-sidebar{width:100%}.sidebar-hide .calendar-sidebar{height:43px}.sidebar-hide .calendar-sidebar{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:none;box-shadow:none}.calendar-sidebar>.calendar-year{position:relative;padding:10px 20px;text-align:center;background-color:#8773c1;-webkit-box-shadow:0 3px 8px -3px rgba(53,43,80,.65);box-shadow:0 3px 8px -3px rgba(53,43,80,.65)}.calendar-sidebar>.calendar-year>button.icon-button{width:14px;height:14px}.calendar-sidebar>.calendar-year>button.icon-button>span{border-right-width:3px;border-bottom-width:3px}.calendar-sidebar>.calendar-year>p{font-size:18px;margin:0 10px}.calendar-sidebar>.month-list{position:relative;width:100%;height:calc(100% - 43px);overflow-y:auto;background-color:#8773c1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);z-index:-1}.sidebar-hide .calendar-sidebar>.month-list{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.calendar-sidebar>.month-list>.calendar-months{position:absolute;top:0;left:0;width:100%;list-style-type:none;margin:0;padding:0;padding:10px}.calendar-sidebar>.month-list>.calendar-months::after{content:"";clear:both;display:table}.calendar-sidebar>.month-list>.calendar-months>li{padding:10px 20px;font-size:20px}.calendar-sidebar>span#sidebarToggler{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);top:0;bottom:unset;-webkit-box-shadow:none;box-shadow:none}th[colspan="7"]::after{bottom:0}.calendar-inner{margin-left:0;padding:53px 0 40px 0;float:unset}.calendar-inner::after{content:none;opacity:0}.sidebar-hide .calendar-inner,.event-hide .calendar-inner,.calendar-inner{max-width:100%}.calendar-sidebar>span#sidebarToggler,#eventListToggler{width:40px;height:40px}button.icon-button>span.chevron-arrow-right{border-right-width:4px;border-bottom-width:4px;width:18px;height:18px;-webkit-transform:translateX(-3px) rotate(-45deg);-ms-transform:translateX(-3px) rotate(-45deg);transform:translateX(-3px) rotate(-45deg)}button.icon-button>span.bars,button.icon-button>span.bars::before,button.icon-button>span.bars::after{height:4px}button.icon-button>span.bars::before{top:-8px}button.icon-button>span.bars::after{bottom:-8px}tr.calendar-header .calendar-header-day{padding:0}tr.calendar-body .calendar-day{padding:8px 0}tr.calendar-body .calendar-day .day{padding:10px;width:40px;height:40px;font-size:16px}.event-indicator{-webkit-transform:translate(-50%,calc(-100% + -3px));-ms-transform:translate(-50%,calc(-100% + -3px));transform:translate(-50%,calc(-100% + -3px))}.event-indicator>.type-bullet{padding:1px}.event-indicator>.type-bullet>div{width:6px;height:6px}.event-indicator{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}tr.calendar-body .calendar-day .day.calendar-today .event-indicator,tr.calendar-body .calendar-day .day.calendar-active .event-indicator{-webkit-transform:translate(-50%,3px);-ms-transform:translate(-50%,3px);transform:translate(-50%,3px)}.calendar-events{position:relative;padding:20px 15px;width:100%;height:185px;-webkit-box-shadow:0 5px 18px -3px rgba(0,0,0,.15);box-shadow:0 5px 18px -3px rgba(0,0,0,.15);overflow-y:auto;z-index:0}.event-hide .calendar-events{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);padding:0 15px;height:0}.calendar-events>.event-header>p{font-size:20px}.event-list>.event-empty{padding:10px}.event-container::before{transform:translate(21.5px,25px)}.event-container:last-child.event-container::before{height:22.5px;transform:translate(21.5px,0)}.event-container>.event-icon{width:45px;height:45px}.event-container>.event-icon::before{left:21px}.event-container:last-child>.event-icon::before{height:50%}.event-container>.event-info{width:calc(100% - 45px)}.event-hide #eventListToggler,#eventListToggler{top:calc(100% - 185px);right:0;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%)}.event-hide #eventListToggler{top:100%}#eventListToggler button.icon-button>span.chevron-arrow-right{position:relative;display:inline-block;-webkit-transform:translate(0,-3px) rotate(45deg);-ms-transform:translate(0,-3px) rotate(45deg);transform:translate(0,-3px) rotate(45deg)}}@media screen and (max-width:375px){th[colspan="7"]{font-size:20px;padding-bottom:5px}tr.calendar-header .calendar-header-day{font-size:16px}tr.calendar-body .calendar-day .day{padding:5px;width:30px;height:30px;font-size:14px}} \ No newline at end of file +*/*,::after,::before{-webkit-box-sizing:border-box;box-sizing:border-box}body,html{padding:0;margin:0}body{font-family:'Source Sans Pro'}button:focus,input:focus,textarea:focus{outline:0}.evo-calendar{position:relative;background-color:#fbfbfb;color:#5a5a5a;width:100%;-webkit-box-shadow:0 10px 50px -20px #8773c1;box-shadow:0 10px 50px -20px #8773c1;margin:0 auto;overflow:hidden;z-index:1}.calendar-sidebar{position:absolute;margin-top:0;width:200px;height:100%;float:left;background-color:#8773c1;color:#fff;-webkit-box-shadow:5px 0 18px -3px #8773c1;box-shadow:5px 0 18px -3px #8773c1;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);z-index:2}.calendar-events,.calendar-inner{-webkit-transition:.3s;-o-transition:.3s}.sidebar-hide .calendar-sidebar{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);-webkit-box-shadow:none;box-shadow:none}.calendar-sidebar>span#sidebarToggler{position:absolute;width:40px;height:40px;top:0;right:0;-webkit-transform:translate(100%,0);-ms-transform:translate(100%,0);transform:translate(100%,0);background-color:#8773c1;padding:3% 4%;cursor:pointer;-webkit-box-shadow:5px 0 18px -3px #8773c1;box-shadow:5px 0 18px -3px #8773c1}.calendar-sidebar>.calendar-year{padding:20px;text-align:center}.calendar-sidebar>.calendar-year>p{margin:0;font-size:30px;display:inline-block}.calendar-sidebar>.calendar-year>button.icon-button{display:inline-block;width:20px;height:20px;overflow:visible}.calendar-sidebar>.calendar-year>button.icon-button>span{border-right:4px solid #fff;border-bottom:4px solid #fff;width:100%;height:100%}.calendar-sidebar>.calendar-year>img[year-val=prev]{float:left}.calendar-sidebar>.calendar-year>img[year-val=next]{float:right}.calendar-sidebar>.month-list::-webkit-scrollbar{width:5px;height:5px}.calendar-sidebar>.month-list::-webkit-scrollbar-track{background:0 0}.calendar-sidebar>.month-list::-webkit-scrollbar-thumb{background:#fff;border-radius:5px}.calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#d6c8ff}.calendar-sidebar>.month-list>.calendar-months{list-style-type:none;margin:0;padding:0}.calendar-sidebar>.month-list>.calendar-months>li{padding:7px 30px;cursor:pointer;font-size:16px}.calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:#a692e0}.calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:#755eb5}.calendar-sidebar>.month-list>.calendar-months>li>p{margin:0}.calendar-sidebar>.month-list>.calendar-months>li:has(p){margin:0 0 4px}.calendar-inner{position:relative;padding:40px 30px;float:left;width:100%;max-width:calc(100% - 600px);margin-left:200px;background-color:#fff;-webkit-box-shadow:5px 0 18px -3px rgba(0,0,0,.15);box-shadow:5px 0 18px -3px rgba(0,0,0,.15);transition:.3s;z-index:1}.calendar-inner::after{content:none;position:absolute;top:0;left:0;width:100%;height:100%;background-color:rgba(83,74,109,.5)}.sidebar-hide .calendar-inner{max-width:calc(100% - 400px);margin-left:0}.event-hide .calendar-inner{max-width:calc(100% - 200px)}.event-hide.sidebar-hide .calendar-inner{max-width:100%}.calendar-inner .calendar-table{border-collapse:collapse;font-size:20px;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}th[colspan="7"]{position:relative;text-align:center;text-transform:uppercase;font-weight:600;font-size:30px;color:#8773c1}th[colspan="7"]::after{content:'';position:absolute;bottom:-3px;left:50%;width:50px;height:5px;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:rgba(135,115,193,.15)}th[colspan="7"] div{display:flex;flex-direction:row;justify-content:center;align-items:center;align-self:center}th[colspan="7"] div p{flex:none;width:40%;padding:0;margin:0}th[colspan="7"] div .icon-button{width:fit-content}th[colspan="7"] div .icon-button .chevron-arrow-left,th[colspan="7"] div .icon-button .chevron-arrow-right{border-right:4px solid #8773c1;border-bottom:4px solid #8773c1;width:16px;height:16px}tr.calendar-header .calendar-header-day{padding:10px;text-align:center;color:#5a5a5a}tr.calendar-body .calendar-day{padding:10px 0}tr.calendar-body .calendar-day .day{position:relative;padding:15px;height:60px;width:60px;margin:0 auto;border-radius:50%;text-align:center;color:#5a5a5a;border:1px solid transparent;-webkit-transition:.3s,-webkit-transform .5s;transition:.3s,transform .5s,-webkit-transform .5s;-o-transition:.3s,transform .5s;cursor:pointer}tr.calendar-body .calendar-day .day:hover{background-color:#dadada}#eventListToggler,.event-container>.event-icon>div[class^=event-bullet-],.event-indicator>.type-bullet>div[class^=type-]{background-color:#8773c1}tr.calendar-body .calendar-day .day:active{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}tr.calendar-body .calendar-day .day.calendar-active,tr.calendar-body .calendar-day .day.calendar-active:hover{color:#5a5a5a;border-color:rgba(0,0,0,.5)}tr.calendar-body .calendar-day .day.calendar-today{color:#fff;background-color:#8773c1}tr.calendar-body .calendar-day .day.calendar-today:hover{color:#fff;background-color:#755eb5}tr.calendar-body .calendar-day .day[disabled]{pointer-events:none;cursor:not-allowed;background-color:transparent;color:#b9b9b9}.calendar-events{position:absolute;top:0;right:0;width:400px;height:100%;padding:70px 30px 60px;background-color:#fbfbfb;transition:.3s;overflow-y:auto;z-index:0}.calendar-events::-webkit-scrollbar{width:5px;height:5px}.calendar-events::-webkit-scrollbar-track{background:0 0}.calendar-events::-webkit-scrollbar-thumb{background:#8e899c;border-radius:5px}.calendar-events::-webkit-scrollbar-thumb:hover{background:#6c6875}.calendar-events>.event-header>p{font-size:30px;font-weight:600;color:#5a5a5a}#eventListToggler{position:absolute;width:40px;height:40px;top:0;right:0;padding:10px;cursor:pointer;-webkit-box-shadow:5px 0 18px -3px #8773c1;box-shadow:5px 0 18px -3px #8773c1;z-index:1}.event-list::after{content:"";clear:both;display:table}.event-list>.event-empty{padding:15px 10px;background-color:rgba(135,115,193,.15);border:1px solid #8773c1}.event-list>.event-empty>p{margin:0;color:#755eb5}.event-container{position:relative;display:flex;width:100%;border-radius:10px;margin-bottom:10px;-webkit-transition:.3s;-o-transition:.3s;transition:.3s;cursor:pointer;float:left}.event-container::before{content:'';position:absolute;top:0;left:0;width:2px;height:100%;transform:translate(29px,30px);background-color:#eaeaea;z-index:-1}.event-container:last-child.event-container::before{height:30px;transform:translate(29px,0)}.event-container:only-child.event-container::before{height:0;opacity:0}.event-container:hover{background-color:#fff;-webkit-box-shadow:0 3px 12px -4px rgba(0,0,0,.65);box-shadow:0 3px 12px -4px rgba(0,0,0,.65)}.event-container>.event-icon{position:relative;padding:20px;width:60px;height:60px;float:left}.event-container>.event-icon>img{width:30px}.event-container>.event-info{align-self:center;width:calc(100% - 60px);display:inline-block;padding:10px 10px 10px 0}.event-container>.event-info>p{margin:0;color:#5a5a5a}.event-container>.event-info>p.event-title{position:relative;font-size:22px;font-weight:600}.event-container>.event-info>p.event-title>span{position:absolute;top:50%;right:0;font-size:12px;font-weight:400;color:#755eb5;border:1px solid #755eb5;border-radius:3px;background-color:rgb(237 234 246);padding:3px 6px;transform:translateY(-50%)}.event-container>.event-info>p.event-desc{font-size:14px;margin-top:5px}.event-indicator{position:absolute;width:-moz-max-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;top:100%;left:50%;-webkit-transform:translate(-50%,calc(-100% + -5px));-ms-transform:translate(-50%,calc(-100% + -5px));transform:translate(-50%,calc(-100% + -5px))}.event-indicator>.type-bullet{float:left;padding:2px}.event-indicator>.type-bullet>div{width:10px;height:10px;border-radius:50%}.event-container>.event-icon>div{width:100%;height:100%;border-radius:50%}.event-container>.event-icon>div.event-bullet-event,.event-indicator>.type-bullet>div.type-event{background-color:#ff7575}.event-container>.event-icon>div.event-bullet-holiday,.event-indicator>.type-bullet>div.type-holiday{background-color:#ffc107}.event-container>.event-icon>div.event-bullet-birthday,.event-indicator>.type-bullet>div.type-birthday{background-color:#3ca8ff}button.icon-button{border:none;background-color:transparent;width:100%;height:100%;padding:0;cursor:pointer}button.icon-button>span.bars{position:relative;width:100%;height:4px;display:block;background-color:#fff}button.icon-button>span.bars::after,button.icon-button>span.bars::before{content:'';position:absolute;width:100%;height:4px;display:block;background-color:#fff}button.icon-button>span.bars::before{top:-8px}button.icon-button>span.bars::after{bottom:-8px}button.icon-button>span.chevron-arrow-left{display:inline-block;border-right:6px solid #fff;border-bottom:6px solid #fff;width:18px;height:18px;-webkit-transform:rotate(-225deg);-ms-transform:rotate(-225deg);transform:rotate(-225deg)}button.icon-button>span.chevron-arrow-right{display:block;border-right:4px solid #fff;border-bottom:4px solid #fff;width:16px;height:16px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg)}@media screen and (max-width:1280px){.calendar-inner{padding:50px 20px 70px;max-width:calc(100% - 580px)}.sidebar-hide .calendar-inner{max-width:calc(100% - 380px)}tr.calendar-body .calendar-day,tr.calendar-header .calendar-header-day{padding:10px 5px}.calendar-events{width:380px;padding:70px 20px 60px}}@media screen and (max-width:1024px){.calendar-sidebar{width:175px}.calendar-inner{padding:50px 10px 70px;max-width:calc(100% - 475px);margin-left:175px}.sidebar-hide .calendar-inner{max-width:calc(100% - 300px)}.event-hide .calendar-inner{max-width:calc(100% - 175px)}.calendar-events{width:300px;padding:70px 10px 60px}tr.calendar-body .calendar-day .day{padding:10px;height:45px;width:45px;font-size:16px}.event-indicator>.type-bullet>div{width:8px;height:8px;border-radius:50%}#eventListToggler,.calendar-sidebar>span#sidebarToggler{width:50px;height:50px}#eventListToggler,.event-hide #eventListToggler{right:0;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}button.icon-button>span.bars,button.icon-button>span.bars::after,button.icon-button>span.bars::before{height:5px}button.icon-button>span.bars::before{top:-10px}button.icon-button>span.bars::after{bottom:-10px}button.icon-button>span.chevron-arrow-right{border-right-width:5px;border-bottom-width:5px;width:20px;height:20px}.event-container::before{transform:translate(24px,25px)}.event-container:last-child.event-container::before{height:25px;transform:translate(24px,0)}.event-container>.event-icon{padding:15px;width:50px;height:50px}.event-container>.event-icon::before{left:24px}.event-container>.event-info{width:calc(100% - 50px)}.event-container>.event-info>p{font-size:18px}}@media screen and (max-width:991px){.calendar-sidebar{width:150px}.calendar-inner{padding:50px 10px 70px;max-width:calc(100% - 425px);margin-left:150px}.sidebar-hide .calendar-inner{max-width:calc(100% - 275px)}.event-hide .calendar-inner{max-width:calc(100% - 150px)}.calendar-events{width:275px;padding:70px 10px 60px}th[colspan="7"] div p{width:60%}}@media screen and (max-width:768px){.calendar-sidebar{width:180px}.calendar-inner{padding:50px 10px 70px;max-width:100%;margin-left:0}.event-hide .calendar-inner,.sidebar-hide .calendar-inner{max-width:100%}.calendar-inner::after{content:'';opacity:1}.sidebar-hide.event-hide .calendar-inner::after{content:none;opacity:0}.event-indicator{-webkit-transform:translate(-50%,calc(-100% + -3px));-ms-transform:translate(-50%,calc(-100% + -3px));transform:translate(-50%,calc(-100% + -3px))}.event-indicator>.type-bullet{padding:0 1px 3px}.calendar-events{width:48%;padding:70px 20px 60px;-webkit-box-shadow:-5px 0 18px -3px rgba(135,115,193,.5);box-shadow:-5px 0 18px -3px rgba(135,115,193,.5);z-index:1}.event-hide .calendar-events{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);-webkit-box-shadow:none;box-shadow:none}#eventListToggler{right:48%;-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.event-hide #eventListToggler{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.calendar-events>.event-list{margin-top:20px}.calendar-sidebar>.calendar-year>button.icon-button{width:16px;height:16px}.calendar-sidebar>.calendar-year>button.icon-button>span{border-right-width:2px;border-bottom-width:2px}.calendar-sidebar>.calendar-year>p{font-size:22px}.calendar-sidebar>.month-list>.calendar-months>li{padding:6px 26px}.calendar-events>.event-header>p{margin:0}.event-container>.event-info>p.event-title{font-size:20px}.event-container>.event-info>p.event-desc{font-size:12px}}@media screen and (max-width:768px) and (min-width:426px){.event-container>.event-info>p.event-title{font-size:18px}}@media screen and (max-width:425px){.calendar-sidebar{width:100%}.sidebar-hide .calendar-sidebar{height:43px;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);-webkit-box-shadow:none;box-shadow:none}.calendar-sidebar>.calendar-year{position:relative;padding:10px 20px;text-align:center;background-color:#8773c1;-webkit-box-shadow:0 3px 8px -3px rgba(53,43,80,.65);box-shadow:0 3px 8px -3px rgba(53,43,80,.65)}.calendar-sidebar>.calendar-year>button.icon-button{width:14px;height:14px}.calendar-sidebar>.calendar-year>button.icon-button>span{border-right-width:3px;border-bottom-width:3px}.calendar-sidebar>.calendar-year>p{font-size:18px;margin:0 10px}.calendar-sidebar>.month-list{position:relative;width:100%;height:calc(100% - 43px);overflow-y:auto;background-color:#8773c1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);z-index:-1}.sidebar-hide .calendar-sidebar>.month-list{-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%)}.calendar-sidebar>.month-list>.calendar-months{position:absolute;top:0;left:0;width:100%;list-style-type:none;margin:0;padding:10px}.calendar-sidebar>.month-list>.calendar-months::after{content:"";clear:both;display:table}.calendar-sidebar>.month-list>.calendar-months>li{padding:10px 20px;font-size:20px}.calendar-sidebar>span#sidebarToggler{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);transform:translate(0,0);top:0;bottom:unset;-webkit-box-shadow:none;box-shadow:none}th[colspan="7"]::after{bottom:0}.calendar-inner{margin-left:0;padding:53px 0 40px;float:unset}.calendar-inner::after{content:none;opacity:0}.calendar-inner,.event-hide .calendar-inner,.sidebar-hide .calendar-inner{max-width:100%}#eventListToggler,.calendar-sidebar>span#sidebarToggler{width:40px;height:40px}button.icon-button>span.chevron-arrow-right{border-right-width:4px;border-bottom-width:4px;width:18px;height:18px;-webkit-transform:translateX(-3px) rotate(-45deg);-ms-transform:translateX(-3px) rotate(-45deg);transform:translateX(-3px) rotate(-45deg)}button.icon-button>span.bars,button.icon-button>span.bars::after,button.icon-button>span.bars::before{height:4px}button.icon-button>span.bars::before{top:-8px}button.icon-button>span.bars::after{bottom:-8px}tr.calendar-header .calendar-header-day{padding:0}tr.calendar-body .calendar-day{padding:8px 0}tr.calendar-body .calendar-day .day{padding:10px;width:40px;height:40px;font-size:16px}.event-indicator>.type-bullet{padding:1px}.event-indicator>.type-bullet>div{width:6px;height:6px}.event-indicator{-webkit-transform:translate(-50%,0);-ms-transform:translate(-50%,0);transform:translate(-50%,0)}tr.calendar-body .calendar-day .day.calendar-active .event-indicator,tr.calendar-body .calendar-day .day.calendar-today .event-indicator{-webkit-transform:translate(-50%,3px);-ms-transform:translate(-50%,3px);transform:translate(-50%,3px)}.calendar-events{position:relative;padding:20px 15px;width:100%;height:185px;-webkit-box-shadow:0 5px 18px -3px rgba(0,0,0,.15);box-shadow:0 5px 18px -3px rgba(0,0,0,.15);overflow-y:auto;z-index:0}.event-hide .calendar-events{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);padding:0 15px;height:0}.calendar-events>.event-header>p{font-size:20px}.event-list>.event-empty{padding:10px}.event-container::before{transform:translate(21.5px,25px)}.event-container:last-child.event-container::before{height:22.5px;transform:translate(21.5px,0)}.event-container>.event-icon{width:45px;height:45px}.event-container>.event-icon::before{left:21px}.event-container:last-child>.event-icon::before{height:50%}.event-container>.event-info{width:calc(100% - 45px)}#eventListToggler,.event-hide #eventListToggler{top:calc(100% - 185px);right:0;-webkit-transform:translate(0,-100%);-ms-transform:translate(0,-100%);transform:translate(0,-100%)}.event-hide #eventListToggler{top:100%}#eventListToggler button.icon-button>span.chevron-arrow-right{position:relative;display:inline-block;-webkit-transform:translate(0,-3px) rotate(45deg);-ms-transform:translate(0,-3px) rotate(45deg);transform:translate(0,-3px) rotate(45deg)}}@media screen and (max-width:375px){th[colspan="7"]{font-size:20px;padding-bottom:5px}tr.calendar-header .calendar-header-day{font-size:16px}tr.calendar-body .calendar-day .day{padding:5px;width:30px;height:30px;font-size:14px}} \ No newline at end of file diff --git a/evo-calendar/css/evo-calendar.orange-coral.css b/evo-calendar/css/evo-calendar.orange-coral.css index 513aa52..43fa1b2 100644 --- a/evo-calendar/css/evo-calendar.orange-coral.css +++ b/evo-calendar/css/evo-calendar.orange-coral.css @@ -57,6 +57,14 @@ margin: 0 auto; background: #ff9966; } +.orange-coral th[colspan="7"] div .icon-button .chevron-arrow-left, +.orange-coral th[colspan="7"] div .icon-button .chevron-arrow-right +{ + border-right: 6px solid #ff9966; + border-bottom: 6px solid #ff5e62; + width: 16px; + height: 16px; +} .orange-coral tr.calendar-body .calendar-day .day:hover { background-color: rgba(255, 153, 102, 0.32); color: #ff6363; diff --git a/evo-calendar/css/evo-calendar.orange-coral.min.css b/evo-calendar/css/evo-calendar.orange-coral.min.css index 6d1bf84..3a52c35 100644 --- a/evo-calendar/css/evo-calendar.orange-coral.min.css +++ b/evo-calendar/css/evo-calendar.orange-coral.min.css @@ -9,5 +9,4 @@ * Repo: https://github.com/edlynvillegas/evo-calendar * Issues: https://github.com/edlynvillegas/evo-calendar/issues * -*/ -.orange-coral{-webkit-box-shadow:0 10px 50px -20px rgb(255,153,102,.65);box-shadow:0 10px 50px -20px rgb(255,153,102,.65);border:2px solid #fc9567}.orange-coral .calendar-sidebar{background:#fc9567;background:-o-linear-gradient(left,#ff5e62,#ff9966);background:-webkit-gradient(linear,left top,right top,from(#ff5e62),to(#ff9966));background:linear-gradient(to right,#ff5e62,#ff9966);-webkit-box-shadow:5px 0 18px -3px rgb(255,152,101);box-shadow:5px 0 18px -3px rgb(255,152,101)}.orange-coral.sidebar-hide .calendar-sidebar{-webkit-box-shadow:none;box-shadow:none}.orange-coral .calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#ffd3bd}.orange-coral .calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:rgba(255,255,255,.2)}.orange-coral .calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:rgba(255,255,255,.4)}.orange-coral .calendar-sidebar>span#sidebarToggler,.orange-coral #eventListToggler{background-color:#ff9665;-webkit-box-shadow:0 0 18px -3px rgb(255,153,102,.65);box-shadow:0 0 18px -3px rgb(255,153,102,.65)}.orange-coral th[colspan="7"]{position:relative;font-size:30px;color:#fc9567}.orange-coral th[colspan="7"]::after{content:'';display:block;width:92%;height:1px;margin:0 auto;background:#f96}.orange-coral tr.calendar-body .calendar-day .day:hover{background-color:rgba(255,153,102,.32);color:#ff6363}.orange-coral tr.calendar-body .calendar-day .day.calendar-today{background:#f96;background:-o-linear-gradient(left,#ff5e62,#ff9966);background:-webkit-gradient(linear,left top,right top,from(#ff5e62),to(#ff9966));background:linear-gradient(to right,#ff5e62,#ff9966)}.orange-coral tr.calendar-body .calendar-day .day.calendar-active,.orange-coral tr.calendar-body .calendar-day .day.calendar-active:hover{border-color:#ff2b30}.orange-coral tr.calendar-body .calendar-day .day.calendar-today:hover{color:#fff}.orange-coral .calendar-events{background-color:#fff}.orange-coral .calendar-events::-webkit-scrollbar-thumb{background:#fc9567;border-radius:5px}.orange-coral .calendar-events::-webkit-scrollbar-thumb:hover{background:#dc855e}.orange-coral .event-container>.event-icon>div.event-bullet-event,.orange-coral .event-indicator>.type-bullet>div.type-event{background-color:#ff4d55}.orange-coral .event-list>.event-empty{background-color:rgba(255,150,101,.15);border:1px solid #ff9665}.orange-coral .event-list>.event-empty>p{color:#ff6663}.orange-coral .event-container>.event-info>p.event-title>span{color:#ff9665;background-color:rgba(255,150,101,.15);border:1px solid #ff9665}@media only screen and (max-width:768px){.orange-coral .calendar-inner::after{background-color:rgba(160,131,119,.5)}.orange-coral .calendar-events{-webkit-box-shadow:-5px 0 18px -3px rgba(255,152,101,.5);box-shadow:-5px 0 18px -3px rgba(255,152,101,.5)}.orange-coral.event-hide .calendar-events{-webkit-box-shadow:none;box-shadow:none}}@media screen and (max-width:425px){.orange-coral .calendar-sidebar>.calendar-year{background:#fc9567;background:-o-linear-gradient(left,#ff7b64,#f96);background:-webkit-gradient(linear,left top,right top,from(#ff7b64),to(#f96));background:linear-gradient(to right,#ff7b64,#f96);-webkit-box-shadow:0 5px 18px -3px rgba(152,91,61,.65);box-shadow:0 3px 8px -3px rgba(152,91,61,.65)}.orange-coral .calendar-sidebar>.month-list{background:-o-linear-gradient(left,#ff5e62,#f96);background:-webkit-gradient(linear,left top,right top,from(#ff5e62),to(#f96));background:linear-gradient(to right,#ff5e62,#f96)}} \ No newline at end of file +*/.orange-coral{-webkit-box-shadow:0 10px 50px -20px rgb(255,153,102,.65);box-shadow:0 10px 50px -20px rgb(255,153,102,.65);border:2px solid #fc9567}.orange-coral .calendar-sidebar{background:#fc9567;background:-o-linear-gradient(left,#ff5e62,#f96);background:-webkit-gradient(linear,left top,right top,from(#ff5e62),to(#f96));background:linear-gradient(to right,#ff5e62,#f96);-webkit-box-shadow:5px 0 18px -3px #ff9865;box-shadow:5px 0 18px -3px #ff9865}.orange-coral.sidebar-hide .calendar-sidebar{-webkit-box-shadow:none;box-shadow:none}.orange-coral .calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#ffd3bd}.orange-coral .calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:rgba(255,255,255,.2)}.orange-coral .calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:rgba(255,255,255,.4)}.orange-coral #eventListToggler,.orange-coral .calendar-sidebar>span#sidebarToggler{background-color:#ff9665;-webkit-box-shadow:0 0 18px -3px rgb(255,153,102,.65);box-shadow:0 0 18px -3px rgb(255,153,102,.65)}.orange-coral th[colspan="7"]{position:relative;font-size:30px;color:#fc9567}.orange-coral th[colspan="7"]::after{content:'';display:block;width:92%;height:1px;margin:0 auto;background:#f96}.orange-coral th[colspan="7"] div .icon-button .chevron-arrow-left,.orange-coral th[colspan="7"] div .icon-button .chevron-arrow-right{border-right:6px solid #f96;border-bottom:6px solid #ff5e62;width:16px;height:16px}.orange-coral tr.calendar-body .calendar-day .day:hover{background-color:rgba(255,153,102,.32);color:#ff6363}.orange-coral tr.calendar-body .calendar-day .day.calendar-today{background:#f96;background:-o-linear-gradient(left,#ff5e62,#f96);background:-webkit-gradient(linear,left top,right top,from(#ff5e62),to(#f96));background:linear-gradient(to right,#ff5e62,#f96)}.orange-coral tr.calendar-body .calendar-day .day.calendar-active,.orange-coral tr.calendar-body .calendar-day .day.calendar-active:hover{border-color:#ff2b30}.orange-coral tr.calendar-body .calendar-day .day.calendar-today:hover{color:#fff}.orange-coral .calendar-events{background-color:#fff}.orange-coral .calendar-events::-webkit-scrollbar-thumb{background:#fc9567;border-radius:5px}.orange-coral .event-container>.event-info>p.event-title>span,.orange-coral .event-list>.event-empty{background-color:rgba(255,150,101,.15);border:1px solid #ff9665}.orange-coral .calendar-events::-webkit-scrollbar-thumb:hover{background:#dc855e}.orange-coral .event-container>.event-icon>div.event-bullet-event,.orange-coral .event-indicator>.type-bullet>div.type-event{background-color:#ff4d55}.orange-coral .event-list>.event-empty>p{color:#ff6663}.orange-coral .event-container>.event-info>p.event-title>span{color:#ff9665}@media only screen and (max-width:768px){.orange-coral .calendar-inner::after{background-color:rgba(160,131,119,.5)}.orange-coral .calendar-events{-webkit-box-shadow:-5px 0 18px -3px rgba(255,152,101,.5);box-shadow:-5px 0 18px -3px rgba(255,152,101,.5)}.orange-coral.event-hide .calendar-events{-webkit-box-shadow:none;box-shadow:none}}@media screen and (max-width:425px){.orange-coral .calendar-sidebar>.calendar-year{background:#fc9567;background:-o-linear-gradient(left,#ff7b64,#f96);background:-webkit-gradient(linear,left top,right top,from(#ff7b64),to(#f96));background:linear-gradient(to right,#ff7b64,#f96);-webkit-box-shadow:0 5px 18px -3px rgba(152,91,61,.65);box-shadow:0 3px 8px -3px rgba(152,91,61,.65)}.orange-coral .calendar-sidebar>.month-list{background:-o-linear-gradient(left,#ff5e62,#f96);background:-webkit-gradient(linear,left top,right top,from(#ff5e62),to(#f96));background:linear-gradient(to right,#ff5e62,#f96)}} \ No newline at end of file diff --git a/evo-calendar/css/evo-calendar.royal-navy.css b/evo-calendar/css/evo-calendar.royal-navy.css index cdc927b..0e8e1b5 100644 --- a/evo-calendar/css/evo-calendar.royal-navy.css +++ b/evo-calendar/css/evo-calendar.royal-navy.css @@ -44,7 +44,7 @@ right: 0; background-color: #f7be16; border-radius: 50%; - padding: 8px; + padding: 1% 4%; -webkit-transform: translate(50%, 0); -ms-transform: translate(50%, 0); transform: translate(50%, 0); @@ -83,6 +83,14 @@ background-color: rgba(48, 152, 197, 0.25); color: #164255; } +.royal-navy th[colspan="7"] div .icon-button .chevron-arrow-left, +.royal-navy th[colspan="7"] div .icon-button .chevron-arrow-right +{ + border-right: 4px solid #164255; + border-bottom: 4px solid #216583; + width: 16px; + height: 16px; +} .royal-navy tr.calendar-body .calendar-day .day.calendar-active, .royal-navy tr.calendar-body .calendar-day .day.calendar-active:hover { border-color: #164255; diff --git a/evo-calendar/css/evo-calendar.royal-navy.min.css b/evo-calendar/css/evo-calendar.royal-navy.min.css index 039606c..ea1b376 100644 --- a/evo-calendar/css/evo-calendar.royal-navy.min.css +++ b/evo-calendar/css/evo-calendar.royal-navy.min.css @@ -9,5 +9,4 @@ * Repo: https://github.com/edlynvillegas/evo-calendar * Issues: https://github.com/edlynvillegas/evo-calendar/issues * -*/ -.royal-navy .calendar-sidebar{background-color:#216583;-webkit-box-shadow:5px 0 18px -3px #216583;box-shadow:5px 0 18px -3px #216583}.royal-navy.sidebar-hide .calendar-sidebar{-webkit-box-shadow:none;box-shadow:none}.royal-navy .calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#fff7e1}.royal-navy .calendar-sidebar>.month-list>.calendar-months{padding:0 15px 0 0}.royal-navy .calendar-sidebar>.month-list>.calendar-months>li{padding:9px 30px;border-radius:0 25px 25px 0}.royal-navy .calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:rgba(0,0,0,.2)}.royal-navy .calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:rgba(0,0,0,.35)}.royal-navy .calendar-sidebar>span#sidebarToggler{width:35px;height:35px;top:10px;right:0;background-color:#f7be16;border-radius:50%;padding:8px;-webkit-transform:translate(50%,0);-ms-transform:translate(50%,0);transform:translate(50%,0);-webkit-box-shadow:0 5px 10px -3px #f7be16;box-shadow:0 5px 10px -3px #f7be16;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}.royal-navy.sidebar-hide .calendar-sidebar>span#sidebarToggler{-webkit-transform:translate(calc(100% + 10px),0);-ms-transform:translate(calc(100% + 10px),0);transform:translate(calc(100% + 10px),0)}.royal-navy button.icon-button>span.bars,.royal-navy button.icon-button>span.bars::before,.royal-navy button.icon-button>span.bars::after{height:3px}.royal-navy button.icon-button>span.bars::before{top:-6px}.royal-navy button.icon-button>span.bars::after{bottom:-6px}.royal-navy .calendar-inner{color:#164255}.royal-navy th[colspan="7"]{color:#216583}.royal-navy th[colspan="7"]::after{background-color:rgba(33,101,131,.15)}.royal-navy tr.calendar-body .calendar-day .day:hover{background-color:rgba(48,152,197,.25);color:#164255}.royal-navy tr.calendar-body .calendar-day .day.calendar-active,.royal-navy tr.calendar-body .calendar-day .day.calendar-active:hover{border-color:#164255}.royal-navy tr.calendar-body .calendar-day .day.calendar-today{background-color:#216583;color:#fff;-webkit-box-shadow:0 5px 10px -3px #216583;box-shadow:0 5px 10px -3px #216583}.royal-navy #eventListToggler{width:35px;height:35px;top:10px;background-color:#f7be16;border-radius:50%;padding:6px;-webkit-box-shadow:0 5px 10px -3px #f7be16;box-shadow:0 5px 10px -3px #f7be16;-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px);-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease}.royal-navy .calendar-events{padding-top:50px;padding-bottom:40px;background-color:#216583;color:#fff}.royal-navy .calendar-events::-webkit-scrollbar-thumb{background:#fff;border-radius:5px}.royal-navy .calendar-events::-webkit-scrollbar-thumb:hover{background:#fff7e1}.royal-navy .calendar-events>.event-header>p{text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid #fff;color:#fff}.royal-navy .event-container:hover{background-color:#fff}.royal-navy .event-container>.event-info>p{color:#fff}.royal-navy .event-container:hover>.event-info>p{color:#164255}.royal-navy .event-container>.event-info>p.event-title>span{color:#fff;border:1px solid #164255;border-radius:15px;background-color:rgb(22 66 85)}.royal-navy .event-list>.event-empty{background-color:rgba(255,255,255,.15);border:1px solid #fff}.royal-navy .event-list>.event-empty>p{color:#fff}@media screen and (max-width:768px){.royal-navy .calendar-sidebar>.month-list>.calendar-months>li{padding:6px 26px}.royal-navy button.icon-button>span.bars,.royal-navy button.icon-button>span.bars::before,.royal-navy button.icon-button>span.bars::after{height:4px}.royal-navy .calendar-inner::after{background-color:rgba(44,81,97,.5)}.royal-navy .calendar-sidebar>span#sidebarToggler,.royal-navy #eventListToggler{width:50px;height:50px;padding:15px 12px}.royal-navy button.icon-button>span.bars::before{top:-8px}.royal-navy button.icon-button>span.bars::after{bottom:-8px}.royal-navy .calendar-events{-webkit-box-shadow:-5px 0 18px -3px #216583;box-shadow:-5px 0 18px -3px #216583}.royal-navy.event-hide .calendar-events{-webkit-transform:translateX(calc(100% + 1px));-ms-transform:translateX(calc(100% + 1px));transform:translateX(calc(100% + 1px));-webkit-box-shadow:none;box-shadow:none}.royal-navy #eventListToggler{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}.royal-navy.event-hide #eventListToggler{right:10px;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.royal-navy.event-hide .calendar-events #eventListToggler{-webkit-transform:translateX(calc(-100% - 10px));-ms-transform:translateX(calc(-100% - 10px));transform:translateX(calc(-100% - 10px))}}@media screen and (max-width:768px) and (min-width:426px){.royal-navy .calendar-events{padding-top:60px}}@media screen and (max-width:425px){.royal-navy .calendar-sidebar>.calendar-year{background-color:#216583;-webkit-box-shadow:0 5px 8px -3px rgba(12,37,47,.65);box-shadow:0 5px 8px -3px rgba(12,37,47,.65)}.royal-navy .calendar-sidebar>.month-list{background-color:#174d65}.royal-navy .calendar-sidebar>.month-list>.calendar-months{padding:10px}.royal-navy .calendar-sidebar>.month-list>.calendar-months>li{width:100%;padding:10px 20px;border-radius:25px;float:unset}.royal-navy.sidebar-hide .calendar-sidebar>span#sidebarToggler{-webkit-transform:translate(-5px,10px) scale(.9);-ms-transform:translate(-5px,10px) scale(.9);transform:translate(-5px,10px) scale(.9)}.royal-navy .calendar-sidebar>span#sidebarToggler{-webkit-transform:translate(-5px,10px) scale(.9);-ms-transform:translate(-5px,10px) scale(.9);transform:translate(-5px,10px) scale(.9)}.royal-navy .calendar-inner{padding:63px 0 40px 0;-webkit-box-shadow:0 5px 8px -3px rgba(12,37,47,.65);box-shadow:0 5px 8px -3px rgba(12,37,47,.65)}.royal-navy.event-hide .calendar-events,.royal-navy .calendar-events{padding:20px 15px;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.royal-navy.event-hide .calendar-events{padding:0 15px}.royal-navy.event-hide #eventListToggler,.royal-navy #eventListToggler{top:calc(100% - 185px);right:0;-webkit-transform:translate(-5px,-50%) scale(.9);-ms-transform:translate(-5px,-50%) scale(.9);transform:translate(-5px,-50%) scale(.9)}.royal-navy.event-hide #eventListToggler{top:100%;-webkit-transform:translate(0,-100%) scale(.8);-ms-transform:translate(0,-100%) scale(.8);transform:translate(0,-100%) scale(.8)}} \ No newline at end of file +*/.royal-navy .calendar-sidebar{background-color:#216583;-webkit-box-shadow:5px 0 18px -3px #216583;box-shadow:5px 0 18px -3px #216583}.royal-navy.sidebar-hide .calendar-sidebar{-webkit-box-shadow:none;box-shadow:none}.royal-navy .calendar-sidebar>.month-list::-webkit-scrollbar-thumb:hover{background:#fff7e1}.royal-navy .calendar-sidebar>.month-list>.calendar-months{padding:0 15px 0 0}.royal-navy .calendar-sidebar>.month-list>.calendar-months>li{padding:9px 30px;border-radius:0 25px 25px 0}.royal-navy .calendar-sidebar>.month-list>.calendar-months>li:hover{background-color:rgba(0,0,0,.2)}.royal-navy .calendar-sidebar>.month-list>.calendar-months>li.active-month{background-color:rgba(0,0,0,.35)}.royal-navy .calendar-sidebar>span#sidebarToggler{width:35px;height:35px;top:10px;right:0;background-color:#f7be16;border-radius:50%;padding:1% 4%;-webkit-transform:translate(50%,0);-ms-transform:translate(50%,0);transform:translate(50%,0);-webkit-box-shadow:0 5px 10px -3px #f7be16;box-shadow:0 5px 10px -3px #f7be16;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.royal-navy.sidebar-hide .calendar-sidebar>span#sidebarToggler{-webkit-transform:translate(calc(100% + 10px),0);-ms-transform:translate(calc(100% + 10px),0);transform:translate(calc(100% + 10px),0)}.royal-navy button.icon-button>span.bars,.royal-navy button.icon-button>span.bars::after,.royal-navy button.icon-button>span.bars::before{height:3px}.royal-navy button.icon-button>span.bars::before{top:-6px}.royal-navy button.icon-button>span.bars::after{bottom:-6px}.royal-navy .calendar-inner,.royal-navy .event-container:hover>.event-info>p{color:#164255}.royal-navy th[colspan="7"]{color:#216583}.royal-navy th[colspan="7"]::after{background-color:rgba(33,101,131,.15)}.royal-navy tr.calendar-body .calendar-day .day:hover{background-color:rgba(48,152,197,.25);color:#164255}.royal-navy th[colspan="7"] div .icon-button .chevron-arrow-left,.royal-navy th[colspan="7"] div .icon-button .chevron-arrow-right{border-right:4px solid #164255;border-bottom:4px solid #216583;width:16px;height:16px}.royal-navy tr.calendar-body .calendar-day .day.calendar-active,.royal-navy tr.calendar-body .calendar-day .day.calendar-active:hover{border-color:#164255}.royal-navy tr.calendar-body .calendar-day .day.calendar-today{background-color:#216583;color:#fff;-webkit-box-shadow:0 5px 10px -3px #216583;box-shadow:0 5px 10px -3px #216583}.royal-navy #eventListToggler{width:35px;height:35px;top:10px;background-color:#f7be16;border-radius:50%;padding:6px;-webkit-box-shadow:0 5px 10px -3px #f7be16;box-shadow:0 5px 10px -3px #f7be16;-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px);-webkit-transition:.3s;-o-transition:.3s;transition:.3s}.royal-navy .calendar-events{padding-top:50px;padding-bottom:40px;background-color:#216583;color:#fff}.royal-navy .calendar-events::-webkit-scrollbar-thumb{background:#fff;border-radius:5px}.royal-navy .calendar-events::-webkit-scrollbar-thumb:hover{background:#fff7e1}.royal-navy .calendar-events>.event-header>p{text-transform:uppercase;padding-bottom:10px;border-bottom:1px solid #fff;color:#fff}.royal-navy .event-container:hover{background-color:#fff}.royal-navy .event-container>.event-info>p{color:#fff}.royal-navy .event-container>.event-info>p.event-title>span{color:#fff;border:1px solid #164255;border-radius:15px;background-color:rgb(22 66 85)}.royal-navy .event-list>.event-empty{background-color:rgba(255,255,255,.15);border:1px solid #fff}.royal-navy .event-list>.event-empty>p{color:#ffff}@media screen and (max-width:768px){.royal-navy .calendar-sidebar>.month-list>.calendar-months>li{padding:6px 26px}.royal-navy button.icon-button>span.bars,.royal-navy button.icon-button>span.bars::after,.royal-navy button.icon-button>span.bars::before{height:4px}.royal-navy .calendar-inner::after{background-color:rgba(44,81,97,.5)}.royal-navy #eventListToggler,.royal-navy .calendar-sidebar>span#sidebarToggler{width:50px;height:50px;padding:15px 12px}.royal-navy button.icon-button>span.bars::before{top:-8px}.royal-navy button.icon-button>span.bars::after{bottom:-8px}.royal-navy .calendar-events{-webkit-box-shadow:-5px 0 18px -3px #216583;box-shadow:-5px 0 18px -3px #216583}.royal-navy.event-hide .calendar-events{-webkit-transform:translateX(calc(100% + 1px));-ms-transform:translateX(calc(100% + 1px));transform:translateX(calc(100% + 1px));-webkit-box-shadow:none;box-shadow:none}.royal-navy #eventListToggler{-webkit-transform:translateX(50%);-ms-transform:translateX(50%);transform:translateX(50%)}.royal-navy.event-hide #eventListToggler{right:10px;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.royal-navy.event-hide .calendar-events #eventListToggler{-webkit-transform:translateX(calc(-100% - 10px));-ms-transform:translateX(calc(-100% - 10px));transform:translateX(calc(-100% - 10px))}}@media screen and (max-width:768px) and (min-width:426px){.royal-navy .calendar-events{padding-top:60px}}@media screen and (max-width:425px){.royal-navy .calendar-sidebar>.calendar-year{background-color:#216583;-webkit-box-shadow:0 5px 8px -3px rgba(12,37,47,.65);box-shadow:0 5px 8px -3px rgba(12,37,47,.65)}.royal-navy .calendar-sidebar>.month-list{background-color:#174d65}.royal-navy .calendar-sidebar>.month-list>.calendar-months{padding:10px}.royal-navy .calendar-sidebar>.month-list>.calendar-months>li{width:100%;padding:10px 20px;border-radius:25px;float:unset}.royal-navy .calendar-sidebar>span#sidebarToggler,.royal-navy.sidebar-hide .calendar-sidebar>span#sidebarToggler{-webkit-transform:translate(-5px,10px) scale(.9);-ms-transform:translate(-5px,10px) scale(.9);transform:translate(-5px,10px) scale(.9)}.royal-navy .calendar-inner{padding:63px 0 40px;-webkit-box-shadow:0 5px 8px -3px rgba(12,37,47,.65);box-shadow:0 5px 8px -3px rgba(12,37,47,.65)}.royal-navy .calendar-events,.royal-navy.event-hide .calendar-events{padding:20px 15px;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}.royal-navy.event-hide .calendar-events{padding:0 15px}.royal-navy #eventListToggler,.royal-navy.event-hide #eventListToggler{top:calc(100% - 185px);right:0;-webkit-transform:translate(-5px,-50%) scale(.9);-ms-transform:translate(-5px,-50%) scale(.9);transform:translate(-5px,-50%) scale(.9)}.royal-navy.event-hide #eventListToggler{top:100%;-webkit-transform:translate(0,-100%) scale(.8);-ms-transform:translate(0,-100%) scale(.8);transform:translate(0,-100%) scale(.8)}} \ No newline at end of file diff --git a/evo-calendar/js/evo-calendar.js b/evo-calendar/js/evo-calendar.js index ba2a371..8fc0026 100644 --- a/evo-calendar/js/evo-calendar.js +++ b/evo-calendar/js/evo-calendar.js @@ -41,7 +41,8 @@ sidebarToggler: true, eventDisplayDefault: true, eventListToggler: true, - calendarEvents: null + calendarEvents: null, + monthNav:true }; _.options = $.extend({}, _.defaults, settings); @@ -60,7 +61,9 @@ previousYearText: "Previous year", nextYearText: "Next year", closeSidebarText: "Close sidebar", - closeEventListText: "Close event list" + closeEventListText: "Close event list", + previousMonthText: "Previous month", + nextMonthText: "Next month", }, es: { days: ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"], @@ -73,7 +76,9 @@ previousYearText: "Año anterior", nextYearText: "El próximo año", closeSidebarText: "Cerrar la barra lateral", - closeEventListText: "Cerrar la lista de eventos" + closeEventListText: "Cerrar la lista de eventos", + previousMonthText: "Previous month", + nextMonthText: "Next month", }, de: { days: ["Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag"], @@ -86,7 +91,9 @@ previousYearText: "Vorheriges Jahr", nextYearText: "Nächstes Jahr", closeSidebarText: "Schließen Sie die Seitenleiste", - closeEventListText: "Schließen Sie die Ereignisliste" + closeEventListText: "Schließen Sie die Ereignisliste", + previousMonthText: "Previous month", + nextMonthText: "Next month", }, pt: { days: ["Domingo", "Segunda-Feira", "Terça-Feira", "Quarta-Feira", "Quinta-Feira", "Sexta-Feira", "Sábado"], @@ -99,7 +106,9 @@ previousYearText: "Ano anterior", nextYearText: "Próximo ano", closeSidebarText: "Feche a barra lateral", - closeEventListText: "Feche a lista de eventos" + closeEventListText: "Feche a lista de eventos", + previousMonthText: "Previous month", + nextMonthText: "Next month", }, fr: { days: ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"], @@ -112,7 +121,9 @@ previousYearText: "Année précédente", nextYearText: "L'année prochaine", closeSidebarText: "Fermez la barre latérale", - closeEventListText: "Fermer la liste des événements" + closeEventListText: "Fermer la liste des événements", + previousMonthText: "Previous month", + nextMonthText: "Next month", }, nl: { days: ["Zondag", "Maandag", "Dinsdag", "Woensdag", "Donderdag", "Vrijdag", "Zaterdag"], @@ -125,7 +136,9 @@ previousYearText: "Vorig jaar", nextYearText: "Volgend jaar", closeSidebarText: "Sluit de zijbalk", - closeEventListText: "Sluit de event lijst" + closeEventListText: "Sluit de event lijst", + previousMonthText: "Previous month", + nextMonthText: "Next month", }, id: { days: ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"], @@ -138,7 +151,9 @@ previousYearText: "Tahun Sebelumnya", nextYearText: "Tahun Berikutnya", closeSidebarText: "Tutup Sidebar", - closeEventListText: "Tutup Daftar Acara" + closeEventListText: "Tutup Daftar Acara", + previousMonthText: "Previous month", + nextMonthText: "Next month", } } } @@ -252,8 +267,9 @@ if (!_.options.eventDisplayDefault) _.toggleEventList(false); else _.toggleEventList(true); } - if (_.options.theme) _.setTheme(_.options.theme); // set calendar theme + if (_.options.theme) _.setTheme(_.options.theme); // set calendar theme _.buildTheBones(); // start building the calendar components + _.setMonthNav(_.options.monthNav) } }; // v1.0.0 - Destroy plugin @@ -409,7 +425,15 @@ if (_.options.theme) $(_.$elements.calendarEl).removeClass(prevTheme); if (_.options.theme !== 'default') $(_.$elements.calendarEl).addClass(_.options.theme); } - + // Set month Nav + EvoCalendar.prototype.setMonthNav=function(isMonthNav){ + var _ = this; + if(isMonthNav){ + _.$elements.innerEl.find('.calendar-table th[colspan="7"] div .icon-button').show() + }else{ + _.$elements.innerEl.find('.calendar-table th[colspan="7"] div .icon-button').hide() + } + } // v1.0.0 - Called in every resize EvoCalendar.prototype.resize = function() { var _ = this; @@ -466,6 +490,11 @@ .off('click.evocalendar') .on('click.evocalendar', _.selectMonth); + // set event listener for month in month nav + _.$elements.calendarEl.find('[data-month-val]') + .off('click.evocalendar') + .on('click.evocalendar', _.selectMonth); + // set event listener for year _.$elements.sidebarEl.find('[data-year-val]') .off('click.evocalendar') @@ -556,8 +585,11 @@ ''+ - '
Today
'+
+ `
+
+
+
+
+
+ `+
+ ' | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
"+t.initials.dates[t.options.language].noEventForToday+"
":e+=""+t.initials.dates[t.options.language].noEventForThisDay+"
",e+=""),n.append(e)},r.prototype.addEventList=function(e){var t,a=this,n=a.$elements.eventEl.find(".event-list");0===n.find("[data-event-index]").length&&n.empty(),a.$active.events.push(e),t=''+a.limitTitle(e.name),e.badge&&(t+=""+e.badge+""),t+="
",e.description&&(t+=''+e.description+"
"),t+=""+a.initials.dates[a.options.language].noEventForToday+"
":t+=""+a.initials.dates[a.options.language].noEventForThisDay+"
",n.append(t)))},r.prototype.buildSidebarYear=function(){this.$elements.sidebarEl.find(".calendar-year > p").text(this.$active.year)},r.prototype.buildSidebarMonths=function(){this.$elements.sidebarEl.find(".calendar-months > [data-month-val]").removeClass("active-month"),this.$elements.sidebarEl.find('.calendar-months > [data-month-val="'+this.$active.month+'"]').addClass("active-month")},r.prototype.buildCalendar=function(){var e,t=this;t.calculateDays(),r=t.formatDate(new Date(t.$label.months[t.$active.month]+" 1 "+t.$active.year),t.options.titleFormat,t.options.language),t.$elements.innerEl.find(".calendar-table th").text(r),t.$elements.innerEl.find(".calendar-body").remove(),e+='Today
+
+
+
+
+
+ | ||||||
---|---|---|---|---|---|---|
"+t.initials.dates[t.options.language].noEventForToday+"
":e+=""+t.initials.dates[t.options.language].noEventForThisDay+"
",e+=""),i.append(e)},a.prototype.addEventList=function(e){var t,a=this.$elements.eventEl.find(".event-list");0===a.find("[data-event-index]").length&&a.empty(),this.$active.events.push(e),t=''+this.limitTitle(e.name),e.badge&&(t+=""+e.badge+""),t+="
",e.description&&(t+=''+e.description+"
"),t+=""+this.initials.dates[this.options.language].noEventForToday+"
":t+=""+this.initials.dates[this.options.language].noEventForThisDay+"
",a.append(t)))},a.prototype.buildSidebarYear=function(){this.$elements.sidebarEl.find(".calendar-year > p").text(this.$active.year)},a.prototype.buildSidebarMonths=function(){this.$elements.sidebarEl.find(".calendar-months > [data-month-val]").removeClass("active-month"),this.$elements.sidebarEl.find('.calendar-months > [data-month-val="'+this.$active.month+'"]').addClass("active-month")},a.prototype.buildCalendar=function(){this.calculateDays(),i=this.formatDate(new Date(this.$label.months[this.$active.month]+" 1 "+this.$active.year),this.options.titleFormat,this.options.language),this.$elements.innerEl.find(".calendar-table th div p").text(i),this.$elements.innerEl.find(".calendar-body").remove(),n+='+ + +
+