|
| 1 | +{% load static %} |
| 2 | + |
| 3 | +<!DOCTYPE html> |
| 4 | +<html> |
| 5 | +<head> |
| 6 | +<meta charset='utf-8' /> |
| 7 | + |
| 8 | +<link href='https://use.fontawesome.com/releases/v5.0.6/css/all.css' rel='stylesheet'> |
| 9 | +<script src="{% static 'calender/js/theme-chooser.js' %}"></script> |
| 10 | + |
| 11 | + |
| 12 | +<link href="{% static 'calender/css/main.css' %}" rel='stylesheet' /> |
| 13 | +<!-- <link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.css" rel="stylesheet"> --> |
| 14 | +<!-- <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.6.0/main.min.js"></script> --> |
| 15 | +<script src="{% static 'calender/js/main.js' %}" ></script> |
| 16 | +<script src="https://unpkg.com/popper.js/dist/umd/popper.min.js"></script> |
| 17 | +<script src="https://unpkg.com/tooltip.js/dist/umd/tooltip.min.js"></script> |
| 18 | + |
| 19 | + |
| 20 | +<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
| 21 | + |
| 22 | + |
| 23 | + |
| 24 | +<script> |
| 25 | + |
| 26 | + document.addEventListener('DOMContentLoaded', function() { |
| 27 | + var initialTimeZone = 'UTC'; |
| 28 | + var calendarEl = document.getElementById('calendar'); |
| 29 | + var calendar; |
| 30 | + |
| 31 | + initThemeChooser({ |
| 32 | + |
| 33 | + init: function(themeSystem) { |
| 34 | + calendar = new FullCalendar.Calendar(calendarEl, { |
| 35 | + timeZone: initialTimeZone, |
| 36 | + themeSystem: themeSystem, |
| 37 | + headerToolbar: { |
| 38 | + left: 'prev,next today', |
| 39 | + center: 'title', |
| 40 | + right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth' |
| 41 | + }, |
| 42 | + // initialDate: '2020-09-12', |
| 43 | + weekNumbers: true, |
| 44 | + navLinks: true, // can click day/week names to navigate views |
| 45 | + editable: true, |
| 46 | + selectable: true, |
| 47 | + nowIndicator: true, |
| 48 | + dayMaxEvents: true, // allow "more" link when too many events |
| 49 | + // showNonCurrentDates: false, |
| 50 | + events: { |
| 51 | + url: '/events/', |
| 52 | + failure: function() { |
| 53 | + document.getElementById('script-warning').style.display = 'block' |
| 54 | + }, |
| 55 | + loading: function(bool) { |
| 56 | + |
| 57 | + if (bool) { |
| 58 | + document.getElementById('loading').style.display = 'block' |
| 59 | + document.getElementById('calendar').style.display = 'none' |
| 60 | + } |
| 61 | + else { |
| 62 | + document.getElementById('loading').style.display = 'none' |
| 63 | + document.getElementById('calendar').style.display = 'block' |
| 64 | + } |
| 65 | + |
| 66 | + |
| 67 | + }, |
| 68 | + }, |
| 69 | + eventTimeFormat: { hour: 'numeric', minute: '2-digit', timeZoneName: 'short' }, |
| 70 | + |
| 71 | + // dateClick: function(arg) { |
| 72 | + // console.log('dateClick', calendar.formatIso(arg.date)); |
| 73 | + // }, |
| 74 | + // select: function(arg) { |
| 75 | + // console.log('select', calendar.formatIso(arg.start), calendar.formatIso(arg.end)); |
| 76 | + // }, |
| 77 | + eventDidMount: function(info) { |
| 78 | + var tooltip = new Tooltip(info.el, { |
| 79 | + title: info.event.extendedProps.description, |
| 80 | + placement: 'top', |
| 81 | + trigger: 'hover', |
| 82 | + container: 'body' |
| 83 | + }); |
| 84 | + }, |
| 85 | + |
| 86 | + }); |
| 87 | + calendar.render(); |
| 88 | + }, |
| 89 | + |
| 90 | + change: function(themeSystem) { |
| 91 | + calendar.setOption('themeSystem', themeSystem); |
| 92 | + } |
| 93 | + |
| 94 | + }); |
| 95 | + |
| 96 | + }); |
| 97 | + |
| 98 | +</script> |
| 99 | +<style> |
| 100 | + |
| 101 | + body { |
| 102 | + margin: 0; |
| 103 | + padding: 0; |
| 104 | + font-size: 14px; |
| 105 | + } |
| 106 | + |
| 107 | + #top, |
| 108 | + #calendar.fc-theme-standard { |
| 109 | + font-family: Arial, Helvetica Neue, Helvetica, sans-serif; |
| 110 | + } |
| 111 | + |
| 112 | + #calendar.fc-theme-bootstrap { |
| 113 | + font-size: 14px; |
| 114 | + } |
| 115 | + |
| 116 | + #top { |
| 117 | + background: #eee; |
| 118 | + border-bottom: 1px solid #ddd; |
| 119 | + padding: 0 10px; |
| 120 | + line-height: 40px; |
| 121 | + font-size: 12px; |
| 122 | + color: #000; |
| 123 | + } |
| 124 | + |
| 125 | + #top .selector { |
| 126 | + display: inline-block; |
| 127 | + margin-right: 10px; |
| 128 | + } |
| 129 | + |
| 130 | + #top select { |
| 131 | + font: inherit; /* mock what Boostrap does, don't compete */ |
| 132 | + } |
| 133 | + |
| 134 | + .left { float: left } |
| 135 | + .right { float: right } |
| 136 | + .clear { clear: both } |
| 137 | + |
| 138 | + #calendar { |
| 139 | + max-width: 1100px; |
| 140 | + margin: 40px auto; |
| 141 | + padding: 0 10px; |
| 142 | + } |
| 143 | + .popper[x-placement^="top"], .tooltip[x-placement^="top"] { |
| 144 | + margin-bottom: 5px; |
| 145 | +} |
| 146 | + .popper, .tooltip { |
| 147 | + position: absolute !important; |
| 148 | + z-index: 9999 !important; |
| 149 | + background: #FFC107; |
| 150 | + color: black; |
| 151 | + width: 200px; |
| 152 | + border-radius: 3px; |
| 153 | + box-shadow: 0 0 2px rgb(0 0 0 / 50%); |
| 154 | + padding: 10px; |
| 155 | + text-align: center; |
| 156 | + opacity: inherit !important; |
| 157 | + font-size: 12px !important; |
| 158 | +} |
| 159 | + |
| 160 | +.table-bordered{ |
| 161 | + border: 3px solid black !important; |
| 162 | +} |
| 163 | +.table-bordered td, .table-bordered th { |
| 164 | + border: 3px solid black !important; |
| 165 | +} |
| 166 | + |
| 167 | +</style> |
| 168 | +</head> |
| 169 | +<body> |
| 170 | + {% include "navbar.html" %} |
| 171 | + |
| 172 | + <div id='top' style="display: none;"> |
| 173 | + |
| 174 | + <div class='left'> |
| 175 | + |
| 176 | + <div id='theme-system-selector' class='selector'> |
| 177 | + Theme System: |
| 178 | + |
| 179 | + <select> |
| 180 | + <option value='bootstrap' selected>Bootstrap 4</option> |
| 181 | + <option value='standard'>unthemed</option> |
| 182 | + </select> |
| 183 | + </div> |
| 184 | + |
| 185 | + <div data-theme-system="bootstrap" class='selector' style='display:none'> |
| 186 | + Theme Name: |
| 187 | + |
| 188 | + <select> |
| 189 | + <option value=''selected >Default</option> |
| 190 | + <option value='cerulean'>Cerulean</option> |
| 191 | + <option value='cosmo'>Cosmo</option> |
| 192 | + <option value='cyborg'>Cyborg</option> |
| 193 | + <option value='darkly'>Darkly</option> |
| 194 | + <option value='flatly'>Flatly</option> |
| 195 | + <option value='journal'>Journal</option> |
| 196 | + <option value='litera'>Litera</option> |
| 197 | + <option value='lumen'>Lumen</option> |
| 198 | + <option value='lux'>Lux</option> |
| 199 | + <option value='materia'>Materia</option> |
| 200 | + <option value='minty'>Minty</option> |
| 201 | + <option value='pulse'>Pulse</option> |
| 202 | + <option value='sandstone'>Sandstone</option> |
| 203 | + <option value='simplex'>Simplex</option> |
| 204 | + <option value='sketchy' >Sketchy</option> |
| 205 | + <option value='slate'>Slate</option> |
| 206 | + <option value='solar' >Solar</option> |
| 207 | + <option value='spacelab'>Spacelab</option> |
| 208 | + <option value='superhero'>Superhero</option> |
| 209 | + <option value='united'>United</option> |
| 210 | + <option value='yeti'>Yeti</option> |
| 211 | + </select> |
| 212 | + </div> |
| 213 | + |
| 214 | + <!-- <span id='loading' style='display:none'>loading theme...</span> --> |
| 215 | + |
| 216 | + </div> |
| 217 | + |
| 218 | + <div class='right'> |
| 219 | + <span class='credits' data-credit-id='bootstrap-standard' style='display:none'> |
| 220 | + <a href='https://getbootstrap.com/docs/3.3/' target='_blank'>Theme by Bootstrap</a> |
| 221 | + </span> |
| 222 | + <span class='credits' data-credit-id='bootstrap-custom' style='display:none'> |
| 223 | + <a href='https://bootswatch.com/' target='_blank'>Theme by Bootswatch</a> |
| 224 | + </span> |
| 225 | + </div> |
| 226 | + |
| 227 | + <div class='clear'></div> |
| 228 | + </div> |
| 229 | +<div class="container" > |
| 230 | + |
| 231 | + <div id='loading'>loading...</div> |
| 232 | + <div id='calendar'></div> |
| 233 | + |
| 234 | +<div class="container"> |
| 235 | + <a style="background:lavender;float: right;margin-bottom: 25px;" id=return_home href='/'>Return to Home</a> |
| 236 | + <a style="background:lavender;float: left;margin-bottom: 25px;" id=update href='/usimple'>Update</a> |
| 237 | +</div> |
| 238 | + |
| 239 | + |
| 240 | + </div> |
| 241 | + |
| 242 | + <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> |
| 243 | + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> |
| 244 | + <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> |
| 245 | +</body> |
| 246 | +</html> |
0 commit comments