This is a quick guide which will help you to start using CalenStyle.
+ +-
+
+
- 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 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 + }); +}); ++ +
This is a list of the plugin settings parameters. This list includes parameters, their default values, all possible values that you can set and describes how to use parameters.
+ +This is a list of callback functions that are triggered on reaching the specified condition.
+ +-
+
+
- Install node from http://nodejs.org. + +
- Run
npm install
in the CalenStyle's root directory to install grunt's dependencies.
+
+ - Run
grunt
, which will run the default task, which runsconcat
,copy
,uglify
andcssmin
.
+
+
-
+
+
-
+
+
grunt
- + + This is a Default Task. + +It is configured as an array of tasks.
+ +-
+
+
-
+
+
concat
- Default concat task, which concatenates all .js files to create calenstyle.js + +
+
+ -
+
+
copy
- copies all .js and .css files from /src folder to /dist folder. + +
+
+ -
+
+
uglify
- minifies javascript code + +
+
+ -
+
+
cssmin
- concatenates /src/calenstyle.css and /src/calenstyle-jquery-ui-override.css to /dist/calenstyle.min.css and minifies css. + +
+
+
+
+ -
+
+
-
+
+
grunt CalenStyleConcat
- + + This command helps to build a /src/calenstyle-custom.js by combining .js files for specified views. After concatenation,copy
,uglify
andcssmin
tasks will be performed. + ++ For example - ++ +++ This command will build a custom script by combining code for DetailedMonthView, WeekView and DayView. +grunt CalenStyleConcat:DetailedMonthView:WeekView:DayView
++ + A list of valid arguments for this command + ++ +-
+
+
DetailedMonthView
+ MonthView
+ WeekView
+ DayView
+ CustomView
+ DayEventListView
+ DayEventDetailView
+ QuickAgendaView
+ AgendaView
+ WeekPlannerView
+ AppointmentDayView
+ FilterBar
+ DatePicker
+ Pickers
+
+
+ + If you want to display DatePicker, MonthPicker and YearPicker, then you will have to use arguments+ +DatePicker
andPickers
+ respectively. +
+
+