• jQuery(required; Javascript file)
• jQuery UI (required; You can use a Regular Build of jQuery UI or a Custom Build with Draggable, Droppable & Resizable Interactions and Tooltip Widget; Javascript and CSS files)
• Hammer.js (optional; Can be used to support swipe-based navigation on mobile or you can use any touch gestures library of your choice to fire navigation events; Javascript file)
• jQuery UI Touch Punch (required if you are using CalenStyle View which uses Drag-n-Drop and Resize functionality of jQuery UI for example "DetailedMonthView", "MonthView", "WeekView", "DayView", "CustomView" or "DayEventDetailView"; To enable Touch Event support for jQuery UI; Javascript file)

• calenstyle.min.js (required)

OR

• calenstyle-custom.min.js (required; a custom build of CalenStyle to include code of the required views)

• calenstyle.min.css (required; combines calenstyle.css and calenstyle-jquery-ui-override.css)
• calenstyle-iconfont.css (required, contains font icons used in CalenStyle UI like Next & Previous Buttons, Expand & Contract Buttons, Calendar Button, Default Event Icon and icons for some common events. You can use your own font icon file or customize existing file on Font Generators like IcoMoon; but include fonts for Previous Button(".cs-icon-Prev"), Next Button(".cs-icon-Next"), Expand Button(".cs-icon-Expand"), Contract Button(".cs-icon-Contract"), Calendar Button(".cs-icon-Calendar") and Default Event Icon(".cs-icon-Event"))

You have to include fonts folder in distribution file. It includes -

• calenstyle-iconfont (Font Icon - contains font icons used in CalenStyle UI like Next & Previous Buttons, Expand & Contract Buttons, Calendar Button, Default Event Icon and icons for some common events)

You have to include images folder in distribution file. It includes -

• resize-handle.png (resize handle for resizable events in Detail Views like "Week View", "Day View", "Custom View" or "DayEventDetailView")

To serve data to CalenStyle from URL, you can use sample DataServer provided in the CalenStyle folder. This Data Server is written in node.js. So you will have to follow steps mentioned below in order to make it work.

• Install node.js
• Change directory to path of DataServer
• Run command "npm install"
• Run command "npm start"
• Use following URL in CalenStyle Plugin Initialization code - http://localhost:3000 OR http://[IPv4 address of your machine]:3000

More Details about DataServer is written in DataServer/README.md file.

To start using CalenStyle, go through code of QuickUse-Default.htm for Web and Mobile/QuickUse-Default.htm for Mobile.

<div class="calendar-1">

.calendar-1
{
  width: 1000px;
  height: 500px;
  margin: 0px auto;

  font-size: 14px;
}

$(document).ready(function()
{
  $(".calendar-1").CalenStyle(
  {
    // write settings parameters
  });
});