---
title: Calendar
body_class: app-calendar page-aside-left
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/fullcalendar/fullcalendar.css">
    <link rel="stylesheet" href="{{global}}/vendor/bootstrap-datepicker/bootstrap-datepicker.css">
    <link rel="stylesheet" href="{{global}}/vendor/bootstrap-touchspin/bootstrap-touchspin.css">
    <link rel="stylesheet" href="{{global}}/vendor/jquery-selective/jquery-selective.css">
  {{/content}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/apps/calendar.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/jquery-ui/jquery-ui.min.js"></script>
    <script src="{{global}}/vendor/moment/moment.min.js"></script>
    <script src="{{global}}/vendor/fullcalendar/fullcalendar.js"></script>
    <script src="{{global}}/vendor/jquery-selective/jquery-selective.min.js"></script>
    <script src="{{global}}/vendor/bootstrap-datepicker/bootstrap-datepicker.js"></script>
    <script src="{{global}}/vendor/bootstrap-touchspin/bootstrap-touchspin.min.js"></script>
    <script src="{{global}}/vendor/bootbox/bootbox.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{global}}/js/Plugin/bootstrap-touchspin.js"></script>
    <script src="{{global}}/js/Plugin/bootstrap-datepicker.js"></script>
    <script src="{{global}}/js/Plugin/material.js"></script>
    <script src="{{global}}/js/Plugin/action-btn.js"></script>
    <script src="{{global}}/js/Plugin/editlist.js"></script>
    <script src="{{global}}/js/Plugin/bootbox.js"></script>
  {{/content}}

  {{#content "js" mode="append"}}
    <script src="{{assets}}/js/Site.js"></script>
    <script src="{{assets}}/js/App/Calendar.js"></script>
  {{/content}}

  {{#content "scripts" mode="replace"}}
    <script src="{{assets}}/examples/js/apps/calendar.js"></script>
  {{/content}}

  {{#content "body"}}

    <div class="page">
      <div class="page-aside">
        <div class="page-aside-switch">
          <i class="icon md-chevron-left" aria-hidden="true"></i>
          <i class="icon md-chevron-right" aria-hidden="true"></i>
        </div>
        <div class="page-aside-inner page-aside-scroll">
          <div data-role="container">
            <div data-role="content">
              <section class="page-aside-section">
                <h5 class="page-aside-title">CALENDAR LIST</h5>
                <div class="list-group has-actions">
                  <div class="list-group-item" data-plugin="editlist">
                    <div class="list-content">
                      <span class="item-right">10</span>
                      <span class="list-text">Admin Calendar</span>
                      <div class="item-actions">
                        <span class="btn btn-pure btn-icon" data-toggle="list-editable"><i class="icon md-edit" aria-hidden="true"></i></span>
                        <span class="btn btn-pure btn-icon" data-toggle="list-delete"><i class="icon md-delete" aria-hidden="true"></i></span>
                      </div>
                    </div>
                    <div class="list-editable">
                      <div class="form-group form-material">
                        <input type="text" class="form-control empty" name="label" value="Admin Calendar">
                        <button type="button" class="input-editable-close icon md-close" data-toggle="list-editable-close"
                          aria-label="Close" aria-expanded="true"></button>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item" data-plugin="editlist">
                    <div class="list-content">
                      <span class="item-right">5</span>
                      <span class="list-text">Home Calendar</span>
                      <div class="item-actions">
                        <span class="btn btn-pure btn-icon" data-toggle="list-editable"><i class="icon md-edit" aria-hidden="true"></i></span>
                        <span class="btn btn-pure btn-icon" data-toggle="list-delete"><i class="icon md-delete" aria-hidden="true"></i></span>
                      </div>
                    </div>
                    <div class="list-editable">
                      <div class="form-group form-material">
                        <input type="text" class="form-control empty" name="label" value="Home Calendar">
                        <button type="button" class="input-editable-close icon md-close" data-toggle="list-editable-close"
                          aria-label="Close" aria-expanded="true"></button>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item" data-plugin="editlist">
                    <div class="list-content">
                      <span class="item-right">16</span>
                      <span class="list-text">Work Calendar</span>
                      <div class="item-actions">
                        <span class="btn btn-pure btn-icon" data-toggle="list-editable"><i class="icon md-edit" aria-hidden="true"></i></span>
                        <span class="btn btn-pure btn-icon" data-toggle="list-delete"><i class="icon md-delete" aria-hidden="true"></i></span>
                      </div>
                    </div>
                    <div class="list-editable">
                      <div class="form-group form-material">
                        <input type="text" class="form-control empty" name="label" value="Work Calendar">
                        <button type="button" class="input-editable-close icon md-close" data-toggle="list-editable-close"
                          aria-label="Close" aria-expanded="true"></button>
                      </div>
                    </div>
                  </div>
                  <div class="list-group-item" data-plugin="editlist">
                    <div class="list-content">
                      <span class="item-right">30</span>
                      <span class="list-text">Calendar One</span>
                      <div class="item-actions">
                        <span class="btn btn-pure btn-icon" data-toggle="list-editable"><i class="icon md-edit" aria-hidden="true"></i></span>
                        <span class="btn btn-pure btn-icon" data-toggle="list-delete"><i class="icon md-delete" aria-hidden="true"></i></span>
                      </div>
                    </div>
                    <div class="list-editable">
                      <div class="form-group form-material">
                        <input type="text" class="form-control empty" name="label" value="Calendar One">
                        <button type="button" class="input-editable-close icon md-close" data-toggle="list-editable-close"
                          aria-label="Close" aria-expanded="true"></button>
                      </div>
                    </div>
                  </div>
                </div>
              </section>
              <section class="page-aside-section">
                <h5 class="page-aside-title">EVENTS</h5>
                <div class="list-group calendar-list">
                  <a class="list-group-item calendar-event" data-title="Meeting" data-stick=true
                    data-color="red-600" href="javascript:void(0)">
                    <i class="md-circle red-600 mr-10" aria-hidden="true"></i>Meeting
                  </a>
                  <a class="list-group-item calendar-event" data-title="Birthday Party" data-stick=true
                    data-color="green-600" href="javascript:void(0)">
                    <i class="md-circle green-600 mr-10" aria-hidden="true"></i>Birthday Party
                  </a>
                  <a class="list-group-item calendar-event" data-title="Call Jimba" data-stick=true
                    data-color="orange-600" href="javascript:void(0)">
                    <i class="md-circle orange-600 mr-10" aria-hidden="true"></i>Call Jimba
                  </a>
                  <a class="list-group-item calendar-event" data-title="Dinner with Team" data-stick=true
                    data-color="cyan-600" href="javascript:void(0)">
                    <i class="md-circle cyan-600 mr-10" aria-hidden="true"></i>Dinner with Team
                  </a>
                  <a id="addNewEventBtn" class="list-group-item" href="javascript:void(0)"> <i class="icon md-plus" aria-hidden="true"></i> Add New Event </a>
                </div>
              </section>
            </div>
          </div>
        </div>
      </div>
      <div class="page-main">
        <div class="calendar-container">
          <div id="calendar"></div>

          <!--AddEvent Dialog -->
          <div class="modal fade" id="addNewEvent" aria-hidden="true" aria-labelledby="addNewEvent"
            role="dialog" tabindex="-1">
            <div class="modal-dialog modal-simple">
              <form class="modal-content form-horizontal" action="#" method="post" role="form">
                <div class="modal-header">
                  <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
                  <h4 class="modal-title">New Event</h4>
                </div>
                <div class="modal-body">
                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="ename">Name:</label>
                    <div class="col-md-10">
                      <input type="text" class="form-control" id="ename" name="ename">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="starts">Starts:</label>
                    <div class="col-md-10">
                      <div class="input-group">
                        <input type="text" class="form-control" id="starts" data-container="#addNewEvent"
                          data-plugin="datepicker">
                        <span class="input-group-addon">
                          <i class="icon md-calendar" aria-hidden="true"></i>
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="ends">Ends:</label>
                    <div class="col-md-10">
                      <div class="input-group">
                        <input type="text" class="form-control" id="ends" data-container="#addNewEvent"
                          data-plugin="datepicker">
                        <span class="input-group-addon">
                          <i class="icon md-calendar" aria-hidden="true"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="repeats">Repeats:</label>
                    <div class="col-md-10">
                      <input type="text" class="form-control" id="repeats" name="repeats" data-plugin="TouchSpin"
                        data-min="0" data-max="10" value="0" />
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="form-control-label col-md-2">Color:</label>
                    <div class="col-md-10">
                      <ul class="color-selector">
                        <li class="bg-blue-600">
                          <input type="radio" checked name="eventColorChosen" id="eventColorChosen2">
                          <label for="eventColorChosen2"></label>
                        </li>
                        <li class="bg-green-600">
                          <input type="radio" name="eventColorChosen" id="eventColorChosen3">
                          <label for="eventColorChosen3"></label>
                        </li>
                        <li class="bg-cyan-600">
                          <input type="radio" name="eventColorChosen" id="eventColorChosen4">
                          <label for="eventColorChosen4"></label>
                        </li>
                        <li class="bg-orange-600">
                          <input type="radio" name="eventColorChosen" id="eventColorChosen5">
                          <label for="eventColorChosen5"></label>
                        </li>
                        <li class="bg-red-600">
                          <input type="radio" name="eventColorChosen" id="eventColorChosen6">
                          <label for="eventColorChosen6"></label>
                        </li>
                        <li class="bg-blue-grey-600">
                          <input type="radio" name="eventColorChosen" id="eventColorChosen7">
                          <label for="eventColorChosen7"></label>
                        </li>
                        <li class="bg-purple-600">
                          <input type="radio" name="eventColorChosen" id="eventColorChosen8">
                          <label for="eventColorChosen8"></label>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="people">People:</label>
                    <div class="col-md-10">
                      <select id="eventPeople" multiple="multiple" class="plugin-selective"></select>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <div class="form-actions">
                    <button class="btn btn-primary" data-dismiss="modal" type="button">Add this event</button>
                    <a class="btn btn-sm btn-white btn-pure" data-dismiss="modal" href="javascript:void(0)">Cancel</a>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <!-- End AddEvent Dialog -->

          <!-- Edit Dialog -->
          <div class="modal fade" id="editNewEvent" aria-hidden="true" aria-labelledby="editNewEvent"
            role="dialog" tabindex="-1" data-show="false">
            <div class="modal-dialog modal-simple">
              <form class="modal-content form-horizontal" action="#" method="post" role="form">
                <div class="modal-header">
                  <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
                  <h4 class="modal-title">Edit Event</h4>
                </div>
                <div class="modal-body">
                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="editEname">Name:</label>
                    <div class="col-md-10">
                      <input type="text" class="form-control" id="editEname" name="editEname">
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="editStarts">Starts:</label>
                    <div class="col-md-10">
                      <div class="input-group">
                        <input type="text" class="form-control" id="editStarts" name="editStarts" data-container="#editNewEvent"
                          data-plugin="datepicker">
                        <span class="input-group-addon">
                          <i class="icon md-calendar" aria-hidden="true"></i>
                        </span>
                      </div>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="editEnds">Ends:</label>
                    <div class="col-md-10">
                      <div class="input-group">
                        <input type="text" class="form-control" id="editEnds" data-container="#editNewEvent"
                          data-plugin="datepicker">
                        <span class="input-group-addon">
                          <i class="icon md-calendar" aria-hidden="true"></i>
                        </span>
                      </div>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="editRepeats">Repeats:</label>
                    <div class="col-md-10">
                      <input type="text" class="form-control" id="editRepeats" name="repeats" data-plugin="TouchSpin"
                        data-min="0" data-max="10" value="0" />
                    </div>
                  </div>
                  <div class="form-group row" id="editColor">
                    <label class="form-control-label col-md-2">Color:</label>
                    <div class="col-md-10">
                      <ul class="color-selector">
                        <li class="bg-blue-600">
                          <input type="radio" data-color="blue|600" name="colorChosen" id="editColorChosen2">
                          <label for="editColorChosen2"></label>
                        </li>
                        <li class="bg-green-600">
                          <input type="radio" data-color="green|600" name="colorChosen" id="editColorChosen3">
                          <label for="editColorChosen3"></label>
                        </li>
                        <li class="bg-cyan-600">
                          <input type="radio" data-color="cyan|600" name="colorChosen" id="editColorChosen4">
                          <label for="editColorChosen4"></label>
                        </li>
                        <li class="bg-orange-600">
                          <input type="radio" data-color="orange|600" name="colorChosen" id="editColorChosen5">
                          <label for="editColorChosen4"></label>
                        </li>
                        <li class="bg-red-600">
                          <input type="radio" data-color="red|600" name="colorChosen" id="editColorChosen6">
                          <label for="editColorChosen6"></label>
                        </li>
                        <li class="bg-blue-grey-600">
                          <input type="radio" data-color="blue-grey|600" name="colorChosen" id="editColorChosen7">
                          <label for="editColorChosen7"></label>
                        </li>
                        <li class="bg-purple-600">
                          <input type="radio" data-color="purple|600" name="colorChosen" id="editColorChosen8">
                          <label for="editColorChosen8"></label>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="editPeople">People:</label>
                    <div class="col-md-10">
                      <select id="editPeople" multiple="multiple" class="plugin-selective"></select>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <div class="form-actions">
                    <button class="btn btn-primary" data-dismiss="modal" type="button">Save</button>
                    <button class="btn btn-danger" data-dismiss="modal" type="button">Delete</button>
                    <a class="btn btn-sm btn-white btn-pure" data-dismiss="modal" href="javascript:void(0)">Cancel</a>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <!-- End EditEvent Dialog -->

          <!--AddCalendar Dialog -->
          <div class="modal fade" id="addNewCalendar" aria-hidden="true" aria-labelledby="addNewCalendar"
            role="dialog" tabindex="-1">
            <div class="modal-dialog modal-simple">
              <form class="modal-content form-horizontal" action="#" method="post" role="form">
                <div class="modal-header">
                  <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
                  <h4 class="modal-title">New Calendar</h4>
                </div>
                <div class="modal-body">
                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="ename">Name:</label>
                    <div class="col-md-10">
                      <input type="text" class="form-control" id="ename" name="ename">
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="form-control-label col-md-2">Color:</label>
                    <div class="col-md-10">
                      <ul class="color-selector">
                        <li class="bg-blue-600">
                          <input type="radio" checked name="colorChosen" id="colorChosen2">
                          <label for="colorChosen2"></label>
                        </li>
                        <li class="bg-green-600">
                          <input type="radio" name="colorChosen" id="colorChosen3">
                          <label for="colorChosen3"></label>
                        </li>
                        <li class="bg-cyan-600">
                          <input type="radio" name="colorChosen" id="colorChosen4">
                          <label for="colorChosen4"></label>
                        </li>
                        <li class="bg-orange-600">
                          <input type="radio" name="colorChosen" id="colorChosen5">
                          <label for="colorChosen5"></label>
                        </li>
                        <li class="bg-red-600">
                          <input type="radio" name="colorChosen" id="colorChosen6">
                          <label for="colorChosen6"></label>
                        </li>
                        <li class="bg-blue-grey-600">
                          <input type="radio" name="colorChosen" id="colorChosen7">
                          <label for="colorChosen7"></label>
                        </li>
                        <li class="bg-purple-600">
                          <input type="radio" name="colorChosen" id="colorChosen8">
                          <label for="colorChosen8"></label>
                        </li>
                      </ul>
                    </div>
                  </div>

                  <div class="form-group row">
                    <label class="col-md-2 form-control-label" for="people">People:</label>
                    <div class="col-md-10">
                      <select id="people" multiple="multiple" class="plugin-selective"></select>
                    </div>
                  </div>
                </div>
                <div class="modal-footer">
                  <div class="form-actions">
                    <button class="btn btn-primary" data-dismiss="modal" type="button">Create</button>
                    <a class="btn btn-sm btn-white btn-pure" data-dismiss="modal" href="javascript:void(0)">Cancel</a>
                  </div>
                </div>
              </form>
            </div>
          </div>
          <!-- End AddCalendar Dialog -->
        </div>
      </div>
    </div>

    <!-- Site Action -->
    <div class="site-action" data-plugin="actionBtn">
      <button type="button" class="site-action-toggle btn-raised btn btn-success btn-floating">
        <i class="front-icon md-plus animation-scale-up" aria-hidden="true"></i>
        <i class="back-icon md-delete animation-scale-up" aria-hidden="true"></i>
      </button>
    </div>
    <!-- End Site Action -->

    <!-- Add Calendar Form -->
    <div class="modal fade" id="addNewCalendarForm" aria-hidden="true" aria-labelledby="addNewCalendarForm"
      role="dialog" tabindex="-1">
      <div class="modal-dialog modal-simple">
        <form class="modal-content" action="#" method="post" role="form">
          <div class="modal-header">
            <button type="button" class="close" aria-hidden="true" data-dismiss="modal">×</button>
            <h4 class="modal-title">Create New Calendar</h4>
          </div>
          <div class="modal-body">
            <div class="form-group">
              <label class="form-control-label mb-15" for="name">Calendar name:</label>
              <input type="text" class="form-control" id="name" name="name" placeholder="Calendar name">
            </div>
            <div class="form-group">
              <label class="form-control-label mb-15" for="name">Choice people to your project:</label>
              <select multiple="multiple" class="plugin-selective"></select>
            </div>
          </div>
          <div class="modal-footer">
            <div class="form-actions">
              <button class="btn btn-primary" data-dismiss="modal" type="button">Create</button>
              <a class="btn btn-sm btn-white btn-pure" data-dismiss="modal" href="javascript:void(0)">Cancel</a>
            </div>
          </div>
        </form>
      </div>
    </div>
    <!-- End Add Calendar Form -->

  {{/content}}
{{/extend}}