194 lines
8.9 KiB
HTML
194 lines
8.9 KiB
HTML
{% extends "layouts/base.html" %}
|
|
|
|
{% block title %} Calendar {% endblock title %}
|
|
|
|
<!-- Specific CSS goes HERE -->
|
|
{% block stylesheets %}{% endblock stylesheets %}
|
|
|
|
{% block content %}
|
|
|
|
<!-- ### $App Screen Content ### -->
|
|
<main class='main-content bgc-grey-100'>
|
|
<div id='mainContent'>
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<div class="bdrs-3 ov-h bgc-white bd">
|
|
<div class="bgc-deep-purple-500 ta-c p-30">
|
|
<h1 class="fw-300 mB-5 lh-1 c-white">01<span class="fsz-def">st</span></h1>
|
|
<h3 class="c-white">Monday</h3>
|
|
</div>
|
|
<div class="pos-r">
|
|
<button type="button" class="mT-nv-50 pos-a r-10 t-2 btn cur-p bdrs-50p p-0 w-3r h-3r btn-warning">
|
|
<i class="ti-plus"></i>
|
|
</button>
|
|
<ul class="m-0 p-0 mT-20">
|
|
<li class="bdB peers ai-c jc-sb fxw-nw">
|
|
<a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
|
|
<div class="peer mR-15">
|
|
<i class="fa fa-fw fa-clock-o c-red-500"></i>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="fw-600">All Day Event</span>
|
|
<div class="c-grey-600">
|
|
<span class="c-grey-700">Nov 01 - </span>
|
|
<i>Website Development</i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="peers mR-15">
|
|
<div class="peer">
|
|
<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
|
|
<i class="ti-pencil"></i>
|
|
</a>
|
|
</div>
|
|
<div class="peer">
|
|
<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
|
|
<i class="ti-trash"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="bdB peers ai-c jc-sb fxw-nw">
|
|
<a class="td-n p-20 peers fxw-nw me-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
|
|
<div class="peer mR-15">
|
|
<i class="fa fa-fw fa-clock-o c-blue-500"></i>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="fw-600">All Day Event</span>
|
|
<div class="c-grey-600">
|
|
<span class="c-grey-700">Nov 01 - </span>
|
|
<i>Website Development</i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="peers mR-15">
|
|
<div class="peer">
|
|
<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
|
|
<i class="ti-pencil"></i>
|
|
</a>
|
|
</div>
|
|
<div class="peer">
|
|
<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
|
|
<i class="ti-trash"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="bdB peers ai-c jc-sb fxw-nw">
|
|
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
|
|
<div class="peer mR-15">
|
|
<i class="fa fa-fw fa-clock-o c-indigo-500"></i>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="fw-600">All Day Event</span>
|
|
<div class="c-grey-600">
|
|
<span class="c-grey-700">Nov 01 - </span>
|
|
<i>Website Development</i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="peers mR-15">
|
|
<div class="peer">
|
|
<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
|
|
<i class="ti-pencil"></i>
|
|
</a>
|
|
</div>
|
|
<div class="peer">
|
|
<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
|
|
<i class="ti-trash"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="bdB peers ai-c jc-sb fxw-nw">
|
|
<a class="td-n p-20 peers fxw-nw mR-20 peer-greed c-grey-900" href="javascript:void(0);" data-bs-toggle="modal" data-bs-target="#calendar-edit">
|
|
<div class="peer mR-15">
|
|
<i class="fa fa-fw fa-clock-o c-green-500"></i>
|
|
</div>
|
|
<div class="peer">
|
|
<span class="fw-600">All Day Event</span>
|
|
<div class="c-grey-600">
|
|
<span class="c-grey-700">Nov 01 - </span>
|
|
<i>Website Development</i>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
<div class="peers mR-15">
|
|
<div class="peer">
|
|
<a href="" class="td-n c-deep-purple-500 cH-blue-500 fsz-md p-5">
|
|
<i class="ti-pencil"></i>
|
|
</a>
|
|
</div>
|
|
<div class="peer">
|
|
<a href="" class="td-n c-red-500 cH-blue-500 fsz-md p-5">
|
|
<i class="ti-trash"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-8">
|
|
<div id='calendar'></div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="calendar-edit">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="bd p-15">
|
|
<h5 class="m-0">Add Event</h5>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label class="form-label fw-500">Event title</label>
|
|
<input class="form-control bdc-grey-200">
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<label class="fw-500 form-label">Start</label>
|
|
<div class="timepicker-input input-icon mb-3">
|
|
<div class="input-group">
|
|
<div class="input-group-text bgc-white bd bdwR-0">
|
|
<i class="ti-calendar"></i>
|
|
</div>
|
|
<input type="text" class="form-control bdc-grey-200 start-date" placeholder="Datepicker" data-provide="datepicker">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<label class="fw-500 form-label">End</label>
|
|
<div class="timepicker-input input-icon mb-3">
|
|
<div class="input-group">
|
|
<div class="input-group-text bgc-white bd bdwR-0">
|
|
<i class="ti-calendar"></i>
|
|
</div>
|
|
<input type="text" class="form-control bdc-grey-200 end-date" placeholder="Datepicker" data-provide="datepicker">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label class="fw-500 form-label">Event title</label>
|
|
<textarea class="form-control bdc-grey-200" rows='5'></textarea>
|
|
</div>
|
|
<div class="text-end">
|
|
<button class="btn btn-primary cur-p btn-color" data-dismiss="modal">Done</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% endblock content %}
|
|
|
|
<!-- Specific Page JS goes HERE -->
|
|
{% block javascripts %}{% endblock javascripts %}
|