127 lines
No EOL
4.7 KiB
HTML
127 lines
No EOL
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Event Calendar</title>
|
|
<link rel="icon" type="image/png" href="./static/favicon.png" />
|
|
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
|
|
<link rel="stylesheet" href="/static/bootstrap/bootstrap.min.css">
|
|
<link rel="stylesheet" href="./static/css/common.css">
|
|
<link rel="stylesheet" href="./static/css/style.css">
|
|
</head>
|
|
|
|
<body class="bg-light">
|
|
|
|
<div id="wrapper" class="d-flex flex-column vh-100">
|
|
<header class="d-flex flex-wrap align-items-stretch flex-shrink-0 p-2 row-gap-2">
|
|
<div class="flex-grow-1 display-6 d-flex align-items-center cea-blue">
|
|
<select class="v-select d-inline-block mx-2 fw-medium cea-blue" id="caltype">
|
|
<option value="daily">Daily</option>
|
|
<option value="monthly">Monthly</option>
|
|
</select>
|
|
<span>Calendar</span>
|
|
</div>
|
|
<div class="d-flex">
|
|
<input type="date" id="selected_date" class="form-control h-100 fs-3 me-2">
|
|
<button type="button" class="btn btn-primary h-100 text-center fs-3 lh-1 text-nowrap" id="checkout" $disabled>
|
|
New Event
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="d-flex flex-grow-1 min-height-0" id="main">
|
|
</main>
|
|
|
|
<footer></footer>
|
|
</div>
|
|
|
|
<template id="t-daily">
|
|
<div id="allday" class="d-flex flex-column row-gap-3 overflow-y-auto px-2 border">
|
|
<div class="sticky-top pt-2 bg-light">
|
|
<div class="fs-4">All day</div>
|
|
<hr class="m-0">
|
|
</div>
|
|
</div>
|
|
<div id="timings" class="d-flex flex-column position-relative justify-content-between px-1 text-end"></div>
|
|
<div id="events" class="position-relative border"></div>
|
|
</template>
|
|
|
|
<template id="t-monthly">
|
|
<div class='container-fluid'>
|
|
<div id='daynames' class='row bg-dark text-white p-1'></div>
|
|
</div>
|
|
<div class='container-fluid' id='monthlycalendar'></div>
|
|
</template>
|
|
|
|
<div class="modal fade" id="eventModal" tabindex="-1" role="dialog" aria-labelledby="eventModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="eventModalLabel">New Event</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form method="post" id="eventform">
|
|
<div class="mb-3">
|
|
<input type="text" name="name" id="name" class="form-control" placeholder="Name" required="true" autofocus>
|
|
<textarea name="message" id="message" class="form-control" rows="3" placeholder="Message (optional)"></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3 row">
|
|
<label class="col-sm-2 col-form-label">From</label>
|
|
<div class="col-sm-5">
|
|
<input type="time" name="timefrom" id="timefrom" class="form-control" required="true">
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<input type="date" name="datefrom" id="datefrom" class="form-control" required="true">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3 row">
|
|
<label class="col-sm-2 col-form-label">To</label>
|
|
<div class="col-sm-5">
|
|
<input type="time" name="timeto" id="timeto" class="form-control" required="true">
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<input type="date" name="dateto" id="dateto" class="form-control" required="true">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="form-check col-sm-5 offset-sm-2">
|
|
<input class="form-check-input" type="checkbox" name="timetbd" id="timetbd">
|
|
<label class="form-check-label" for="timetbd">End time TBD</label>
|
|
</div>
|
|
<div class="form-check col-sm-5">
|
|
<input class="form-check-input" type="checkbox" name="datetbd" id="datetbd">
|
|
<label class="form-check-label" for="datetbd">End day TBD</label>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer" id="eventFooter">
|
|
<div class="row">
|
|
<div class="col-6">
|
|
<button type="button" class="btn btn-danger btn-lg w-100" id="eventdelete" $disabled>Delete</button>
|
|
</div>
|
|
<div class="col-6">
|
|
<button type="button" class="btn btn-primary btn-lg w-100" id="eventsubmit" $disabled>Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="./static/js/cookie.js"></script>
|
|
<script src="./static/js/dayjs.min.js"></script>
|
|
<script src="./static/js/dayjs.customParseFormat.js"></script>
|
|
<script src="./static/js/dayjs.minMax.js"></script>
|
|
<script src="./static/js/dayjs.isBetween.js"></script>
|
|
<script src="./static/js/dayjs.duration.js"></script>
|
|
<script src="/static/bootstrap/bootstrap.bundle.min.js"></script>
|
|
<script src="./static/js/script.js"></script>
|
|
<script src="./static/js/${user}.js"></script>
|
|
</body>
|
|
</html> |