diff --git a/config/static/css/calendar_blue.css b/config/static/css/calendar_blue.css new file mode 100644 index 0000000..e484480 --- /dev/null +++ b/config/static/css/calendar_blue.css @@ -0,0 +1,255 @@ +/* calendar green */ + +.calendar_blue_main { + --color-header-background: rgb(11,20,46,1); + --color-cell-background-business: rgb(11,20,46,1); + --color-cell-background-nonbusiness: rgb(11,20,46,1); + + --color-header-text: #666666; + --color-vertical-line-header: #dddddd; + --color-vertical-line-cell: #eeeeee; + --color-event-background: #419FE0a2; + --color-event-border: #47afff; + --color-event-bar: #1066a8; + --color-event-bar-background: transparent; + --color-event-text: #444444; + --width-vertical-line: 4px; +} + +.calendar_blue_main { + border: 1px solid #999; + font-size: 13px; + font-family: "Fira-Sans"; +} + +.calendar_blue_colheader { +} + +.calendar_blue_cornerright_inner { + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-bottom: 1px solid #999; + color: #ffffff; + background: var(--color-header-background); +} + +.calendar_blue_rowheader_inner { + font-size: 16pt; + + text-align: right; + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-right: 1px solid #999; + border-bottom: 1px solid #999; + color: #ffffff; + background: var(--color-header-background); + padding-right: 4px; +} + +.calendar_blue_corner_inner { + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-right: 1px solid #999; + border-bottom: 1px solid #999; + color: #ffffff; + background: var(--color-header-background); +} + +.calendar_blue_rowheader_minutes { + font-size: 10px; + vertical-align: super; + padding-left: 2px; + padding-right: 2px; +} + +.calendar_blue_colheader_inner { + text-align: center; + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-right: 1px solid #999; + border-bottom: 1px solid #999; + color: #ffffff; + background: var(--color-header-background); + + display: flex; align-items: center; justify-content: center; +} + +.calendar_blue_cell_inner { + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-right: 1px solid #ddd; + /*border-bottom: 0.5px solid #ddd;*/ + background-color: var(--color-cell-background-nonbusiness); +} + +.calendar_blue_cell_business .calendar_blue_cell_inner { + background-color: var(--color-cell-background-business); +} + +.calendar_blue_alldayheader_inner { + text-align: center; + position: absolute; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; + border-right: 1px solid #999; + border-bottom: 1px solid #999; + color: #ffffff; + background-color: var(--color-header-background); +} + +.calendar_blue_message { + padding: 10px; + opacity: 0.9; + color: #ffffff; + background: #000; + background: linear-gradient(to bottom, #999 0%, #666); + text-shadow: 0px -1px 1px rgba(000, 000, 000, 0.2), 0px 1px 0px rgba(255, 255, 255, 0.3); +} + +.calendar_blue_alldayevent { + border-radius: 15px; /* ie gradient + rounded corners problem */ + overflow: hidden; +} + +.calendar_blue_alldayevent_inner { + position: absolute; + overflow: hidden; + top: 2px; + bottom: 2px; + left: 2px; + right: 2px; + padding: 4px; + margin-right: 1px; + font-size: 13px; + color: #ffffff; + background-color: var(--color-event-background); + border-radius: 5px; + border: 1px solid var(--color-event-border); + display: flex; + align-items: center; +} + +.calendar_blue_event { + border-radius: 5px; /* ie gradient + rounded corners problem */ +} + +.calendar_blue_event_inner { + overflow: hidden; + position: absolute; + top: 0px; + bottom: 0px; + left: 0px; + right: 0px; + margin-right: 1px; + font-size: 13px; + padding: 2px 2px 2px 16px; /* make space for duration bar */ + color: #ffffff; + background-color: var(--color-event-background); + border-radius: 5px; + border: 1px solid var(--color-event-border); +} + +.calendar_blue_event_bar { + top: 0px; + bottom: 0px; + left: 0px; + width: 8px; + background-color: var(--color-event-bar-background); +} + +.calendar_blue_event_bar_inner { + position: absolute; + width: 8px; + border-radius: 8px; + background-color: var(--color-event-bar); +} + +.calendar_blue_shadow_inner { + background-color: #666666; + opacity: 0.5; + height: 100%; + border-radius: 5px; +} + +.calendar_blue_event_delete { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjExR/NCNwAAAI5JREFUKFNtkLERgCAMRbmzdK8s4gAUlhYOYEHJEJYOYOEwDmGBPxC4kOPfvePy84MGR0RJ2N1A8H3N6DATwSQ57m2ql8NBG+AEM7D+UW+wjdfUPgerYNgB5gOLRHqhcasg84C2QxPMtrUhSqQIhg7ypy9VM2EUZPI/4rQ7rGxqo9sadTegw+UdjeDLAKUfhbaQUVPIfJYAAAAASUVORK5CYII=) center center no-repeat; + opacity: 0.6; + cursor: pointer; +} + +.calendar_blue_event_delete:hover { + opacity: 1; +} + +.calendar_blue_scroll_up { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAB3RJTUUH2wESDiYcrhwCiQAAAAlwSFlzAAAuIwAALiMBeKU/dgAAAARnQU1BAACxjwv8YQUAAACcSURBVHjaY2AgF9wWsTW6yGMlhi7OhC7AyMDQzMnBXIpFHAFuCtuaMTP+P8nA8P/b1x//FfW/HHuF1UQmxv+NUP1c3OxMVVhNvCVi683E8H8LXOY/w9+fTH81tF8fv4NiIpBRj+YoZtZ/LDUoJmKYhsVUpv0MDiyMDP96sIYV0FS2/8z9ICaLlOhvS4b/jC//MzC8xBG0vJeF7GQBlK0xdiUzCtsAAAAASUVORK5CYII=); +} + +.calendar_blue_scroll_down { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAALiMAAC4jAXilP3YAAACqSURBVChTY7wpam3L9J+xmQEP+PGPKZZxP4MDi4zI78uMDIwa2NT+Z2DYovrmiC+TI8OBP/8ZmEqwGvif4e8vxr+FIDkmEKH25vBWBgbG0+iK/zEwLtF+ffwOXCGI8Y+BoRFFIdC030x/WmBiYBNhpgLdswNJ8RSYaSgmgk39z1gPUfj/29ef/9rwhQTDHRHbrbdEbLvRFcGthkkAra/9/uMvhkK8piNLAgCRpTnNn4AEmAAAAABJRU5ErkJggg==); +} + +.calendar_blue_now { + background-color: red; +} + +.calendar_blue_now:before { + content: ''; + top: -5px; + border-width: 5px; + border-color: transparent transparent transparent red; + border-style: solid; + width: 0px; + height: 0px; + position: absolute; + -moz-transform: scale(.9999); +} + +.calendar_blue_shadow_forbidden .calendar_blue_shadow_inner { + background-color: red; +} + +.calendar_blue_shadow_top { + box-sizing: border-box; + padding: 2px; + border: 1px solid #ccc; + background: #fff; + background: linear-gradient(to bottom, #ffffff 0%, #eeeeee); +} + +.calendar_blue_shadow_bottom { + box-sizing: border-box; + padding: 2px; + border: 1px solid #ccc; + background: #fff; + background: linear-gradient(to bottom, #ffffff 0%, #eeeeee); +} + +.calendar_blue_crosshair_vertical, .calendar_blue_crosshair_horizontal, .calendar_blue_crosshair_left, .calendar_blue_crosshair_top { + background-color: gray; + opacity: 0.2; +} + +.calendar_blue_loading { + background-color: orange; + color: white; + padding: 2px; +} + diff --git a/config/static/img/function/ayala.jpg b/config/static/img/function/ayala.jpg new file mode 100644 index 0000000..de6c54e Binary files /dev/null and b/config/static/img/function/ayala.jpg differ diff --git a/config/static/img/function/belair.jpg b/config/static/img/function/belair.jpg new file mode 100644 index 0000000..8860a7c Binary files /dev/null and b/config/static/img/function/belair.jpg differ diff --git a/config/static/img/function/magallanes.jpg b/config/static/img/function/magallanes.jpg new file mode 100644 index 0000000..4a34713 Binary files /dev/null and b/config/static/img/function/magallanes.jpg differ diff --git a/config/templates/base.html b/config/templates/base.html index abe4fa9..36b636f 100644 --- a/config/templates/base.html +++ b/config/templates/base.html @@ -33,6 +33,7 @@ + {% endcompress %} {% block extra_css %} diff --git a/pyconph/home/templates/home/_schedules.html b/pyconph/home/templates/home/_schedules.html index e0c2a09..ae2df11 100644 --- a/pyconph/home/templates/home/_schedules.html +++ b/pyconph/home/templates/home/_schedules.html @@ -1,6 +1,5 @@ {% load static %} -

@@ -47,6 +46,7 @@

const config = { startDate: "2024-02-25", viewType: "Resources", + theme: "calendar_blue", businessBeginsHour: 8, cellHeight: 50, timeRangeSelectedHandling: "Disabled", @@ -54,10 +54,25 @@

eventResizeHandling: "Disabled", eventClickHandling: "Disabled", columns: [ - {name: "Track 1", id: "track1"}, - {name: "Track 2", id: "track2"}, - {name: "Track 3", id: "track3"}, + {name: "[Track 1] Ayala Banquet", id: "track1", "image": "{% static 'img/function/ayala.jpg' %}"}, + {name: "[Track 2] Magallanes", id: "track2", "image": "{% static 'img/function/magallanes.jpg' %}"}, + {name: "[Track 3] Bel Air", id: "track3", "image": "{% static 'img/function/belair.jpg' %}"}, ], + headerHeight: 90, + onBeforeHeaderRender: args => { + args.header.verticalAlignment = "top"; + args.header.areas = [ + { + left: "calc(50% - 30px)", + bottom: 5, + width: 60, + height: 60, + fontColor: "#999999", + image: args.column.data.image, + style: "box-sizing: border-box; border-radius: 50%; border: 3px solid #ffffff; overflow: hidden;", + } + ]; + } }; const dp1 = new DayPilot.Calendar("dp1", { startDate: "2024-02-25", ...config }); const dp2 = new DayPilot.Calendar("dp2", { startDate: "2024-02-26", ...config });