> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/application/calendar.md).

# Calendar

## Introduction

Calendar app is based on Fullcallendar js [`https://fullcalendar.io/`](https://fullcalendar.io/). We have customized it a bit to give more interactive experience.

## How to Setup

### **HTML Structure** <a href="#html-source" id="html-source"></a>

```markup
 <div class="calendar-wrap">
     <div id="calendar"></div>
 </div>
```

## Dependency

### CSS

```markup
<!-- Calendar CSS -->
<link href="vendors/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" type="text/css" />
```

### JS

```markup
<!-- Fullcalendar JavaScript -->
<script src="vendors/moment/min/moment.min.js"></script>
<script src="vendors/jquery-ui.min.js"></script>
<script src="vendors/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="dist/js/fullcalendar-data.js"></script>
```

### **Initialize**

Include the following `js code` to `fullcalendar-data.js`, you can remove the components you do not need to have.

```javascript
$('#calendar').fullCalendar({
	----
});
```