add new-homepage-2

groups/new-homepage-1/homepage1-js-css.html

@@ -0,0 +1,92 @@
+<style>
+
+.glyphicon-pan {
+        font-size: 11em;
+        color: grey;
+}
+
+.panel-body {
+        text-align:center;
+}
+
+</style>
+
+<script type="text/javascript" src="//libapps.s3.amazonaws.com/sites/2365/include/zabuto_calendar.min.js"></script>
+<link rel="stylesheet" type="text/css" href="//libapps.s3.amazonaws.com/sites/2365/include/zabuto_calendar.min.css">
+
+<style>
+.open-day {
+    background-color: #eee;
+    border-radius: 5px;
+}
+.closed-day {
+    background-color: #ecc6c6;
+    border-radius: 5px;
+}
+.calendar-month-header {
+    font-size:1.3em;
+}
+
+/* align the month name with the back/forward chevrons */
+.calendar-month-navigation {
+    margin-top: -4px !important;
+}
+
+/* make the header unstyled */
+div.zabuto_calendar .table tr.calendar-month-header td {
+    background-color: #fff !important;
+}
+
+/* make the days of the week unstyled */
+th {
+    background-color: #fff !important;
+    border: none !important;
+}
+
+/* remove the borders between dates */
+td {
+    border: none !important;
+    padding: 3px !important;
+}
+
+/* remove the border at the bottom of the calendar */
+div.zabuto_calendar .table tr:last-child {
+    border: none !important
+}
+
+:focus {
+    outline: none;
+}
+
+/* style the pop-up window */
+.modal-footer {
+    display: none;
+}
+.modal-dialog {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.modal-content {
+     width: 300px;
+}
+.modal-header, .modal-body {
+    text-align: center;
+}
+</style>
+
+<script type="application/javascript">
+    $(document).ready(function () {
+        $("#my-calendar").zabuto_calendar({
+            language: "en",
+            year: 2021,
+            month: 1,
+            show_next: 1,
+            show_previous: 2,
+            today: true,
+            weekstartson: 0,
+            ajax: { url:"//libapps.s3.amazonaws.com/sites/2365/include/zabuto.json", modal:true }
+        });
+    });
+</script>