calenstyle
Version:
CalenStyle is a Responsive Drag-and-Drop Event Calendar for Web, iOS, Android & Windows. CalenStyle is customizable plugin having multiple, clean-designed event calendar templates specially designed for web & mobile applications.
883 lines (550 loc) • 27.9 kB
HTML
<html>
<head>
<title>Documentation - CalenStyle</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="author" content="Neha Kadam">
<meta name="description" content="CalenStyle - Modern Event Calendar. Responsive jQuery Event Calendar.">
<script type="text/javascript" src="../demo/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../demo/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../demo/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<link rel="stylesheet" type="text/css" href="css/details.css" />
<link rel="stylesheet" type="text/css" href="css/doc.css" />
<link rel="stylesheet" type="text/css" href="css/CS-Portal-Font.css" />
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/handlebars.js"></script>
<script type="text/javascript" src="js/doc.js"></script>
<script type="text/javascript" src="js/CalenStyleData.js"></script>
</head>
<body class="doc-scroll">
<nav class="navbar navbar-custom navbar-fixed-top top-nav-collapse navbar-static" role="navigation">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-calenstyle" href="https://nehakadam.github.io/CalenStyle">
CalenStyle
</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
<li class="hidden">
<a href="https://nehakadam.github.io/CalenStyle/index.html#home"></a>
</li>
<li class="page-scroll">
<a href="https://nehakadam.github.io/CalenStyle/index.html#features">Features</a>
</li>
<li class="page-scroll">
<a href="https://nehakadam.github.io/CalenStyle/index.html#demo">Demo</a>
</li>
<li class="page-scroll">
<a href="https://nehakadam.github.io/CalenStyle/index.html#contact">Contact</a>
</li>
<li class="collapse-footerlink">
<a href="https://github.com/nehakadam/CalenStyle/wiki/Roadmap">Roadmap</a>
</li>
<li class="collapse-footerlink">
<a href="https://github.com/nehakadam/CalenStyle/releases">Changelog</a>
</li>
<li class="collapse-footerlink">
<a href="http://github.com/nehakadam/CalenStyle/issues">Report Bug</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</nav>
<section class="page-container container">
<section class ="page-content">
<section id="Doc" class="col-xs-12 col-sm-12 col-md-8 col-lg-8">
<div id="BasicUsage" class="section-content">
<a class="page-content-subheader" href="#BasicUsage">Basic Usage</a>
<p>This is a quick guide which will help you to start using CalenStyle.</p>
<article id="link-Dependencies" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-Dependencies">Dependencies</a>
<ul>
<li>jQuery(required; Javascript file)</li>
<li>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)</li>
<li><a class="parameter-link" href="http://hammerjs.github.io/">Hammer.js</a> (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)</li>
<li><a class="parameter-link" href="http://touchpunch.furf.com/">jQuery UI Touch Punch</a> (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)</li>
</ul>
</article>
<article id="link-FilesToInclude" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-FilesToInclude">Plugin Files To Include</a>
<div class="option-header">Javascript</div>
<ul>
<li>
calenstyle.min.js (required)
</li>
</ul>
<p>OR</p>
<ul>
<li>
calenstyle-custom.min.js (required; a <a class="parameter-link icon-link" href="#Build">custom build</a> of CalenStyle to include code of the required views)
</li>
</ul>
<div class="option-header">CSS</div>
<ul>
<li>
calenstyle.min.css (required; combines calenstyle.css and calenstyle-jquery-ui-override.css)
</li>
<li>
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 <a class="parameter-link icon-link" href="https://icomoon.io/app/#/select">IcoMoon</a>; 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"))
</li>
</ul>
<div class="option-header">Font</div>
<p>You have to include fonts folder in distribution file. It includes - </p>
<ul>
<li>
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)
</li>
</ul>
<div class="option-header">Image</div>
<p>You have to include images folder in distribution file. It includes - </p>
<ul>
<li>
resize-handle.png (resize handle for resizable events in Detail Views like "Week View", "Day View", "Custom View" or "DayEventDetailView")
</li>
</ul>
</article>
<article id="link-DataServer" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-DataServer">DataServer</a>
<p>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.</p>
<ul>
<li><a class="parameter-link icon-link" href="https://nodejs.org/en/download/">Install node.js</a></li>
<li>Change directory to path of DataServer</li>
<li>Run command "npm install"</li>
<li>Run command "npm start"</li>
<li>Use following URL in CalenStyle Plugin Initialization code - http://localhost:3000 OR http://[IPv4 address of your machine]:3000</li>
</ul>
<p>More Details about DataServer is written in <a class="parameter-link" href="../DataServer/README.md">DataServer/README.md</a> file.</p>
</article>
<article id="link-StartUse" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-StartUse">Start Using CalenStyle</a>
<p>
To start using CalenStyle, go through code of <a class="parameter-link" href="../demo/QuickUse-Default.htm">QuickUse-Default.htm</a> for Web and <a class="parameter-link" href="../demo/Mobile/QuickUse-Default.htm">Mobile/QuickUse-Default.htm</a> for Mobile.
</p>
<div>
<span class="option-header">HTML</span>
<pre><div class="calendar-1"></pre>
</div>
<div>
<span class="option-header">CSS</span>
<pre>.calendar-1
{
width: 1000px;
height: 500px;
margin: 0px auto;
font-size: 14px;
}
</pre>
</div>
<div>
<span class="option-header">Javascript</span>
<pre>$(document).ready(function()
{
$(".calendar-1").CalenStyle(
{
// write settings parameters
});
});
</pre>
</div>
</article>
</div>
<div id="ParameterOptionsList" class="section-content">
<a class="page-content-subheader" href="#ParameterOptionsList">Parameter Options List</a>
<p>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.</p>
<div class="ParameterOptionsList-Content">
<script id="tmpl-ParameterOptionsList" type="text/x-handlebars-template">
{{#each this}}
<article id={{getIdForLink name}} class="parameter-cont">
<a class="parameter-name parameter-link" href={{getHrefForLink name}}>{{name}}</a>
<span>
{{#if tags}}
{{#each tags}}
<a class="parameter-tag" id={{getIdForTagLink this}}>{{this}}</a>
{{/each}}
{{/if}}
</span>
{{#if default}}
<div class="parameter-default">
<span class="option-header">Default</span>
<div>{{{default}}}</div>
</div>
{{/if}}
{{#if options}}
<div class="parameter-options">
<span class="option-header">Options</span>
<div>{{{options}}}</div>
</div>
{{/if}}
{{#if datatype}}
<div class="parameter-options">
<span class="option-header">Datatype</span>
<div>{{{datatype}}}</div>
</div>
{{/if}}
<div class="parameter-description">
<span class="option-header">Description</span>
<div>{{{description}}}</div>
</div>
{{#if examples}}
<div class="parameter-examples">
<span class="option-header">Examples</span>
{{#each examples}}
<a class="parameter-examples" target="_blank" href={{this}}>{{getExampleName this}}</a>
{{/each}}
</div>
{{/if}}
</article>
{{/each}}
</script>
</div>
</div>
<div id="CallbackFunctionsList" class="section-content">
<a class="page-content-subheader" href="#CallbackFunctionsList">Callback Functions List</a>
<p>This is a list of callback functions that are triggered on reaching the specified condition.</p>
<div class="CallbackFunctionsList-Content">
<script id="tmpl-CallbackFunctionsList" type="text/x-handlebars-template">
{{#each this}}
<article id={{getIdForLink name}} class="parameter-cont">
<a class="parameter-name parameter-link" href={{getHrefForLink name}}>{{#if title}}{{title}}{{else}}{{name}}{{/if}}</a>
<span>
{{#if tags}}
{{#each tags}}
<a class="parameter-tag" id={{getIdForTagLink this}}>{{this}}</a>
{{/each}}
{{/if}}
</span>
{{#if parameters}}
<div class="parameter-parameters">
<span class="option-header">Parameters</span>
<div>{{{parameters}}}</div>
</div>
{{/if}}
{{#if returnvalue}}
<div class="parameter-returnvalue">
<span class="option-header">Return Value</span>
<div>{{{returnvalue}}}</div>
</div>
{{/if}}
<div class="parameter-description">
<span class="option-header">Description</span>
<div>{{{description}}}</div>
</div>
{{#if examples}}
<div class="parameter-examples">
<span class="option-header">Examples</span>
{{#each examples}}
<a class="parameter-examples" target="_blank" href={{this}}>{{getExampleName this}}</a>
{{/each}}
</div>
{{/if}}
</article>
{{/each}}
</script>
</div>
</div>
<div id="FunctionsList" class="section-content">
<a class="page-content-subheader" href="#FunctionsList">Functions List</a>
<div class="FunctionsList-Content">
<script id="tmpl-FunctionsList" type="text/x-handlebars-template">
{{#each this}}
<article id={{getIdForLink name}} class="parameter-cont">
<a class="parameter-name parameter-link" href={{getHrefForLink name}}>{{name}}</a>
<span>
{{#if tags}}
{{#each tags}}
<a class="parameter-tag" id={{getIdForTagLink this}}>{{this}}</a>
{{/each}}
{{/if}}
</span>
{{#if parameters}}
<div class="parameter-parameters">
<span class="option-header">Parameters</span>
<div>{{{parameters}}}</div>
</div>
{{/if}}
{{#if returnvalue}}
<div class="parameter-returnvalue">
<span class="option-header">Return Value</span>
<div>{{{returnvalue}}}</div>
</div>
{{/if}}
<div class="parameter-description">
<span class="option-header">Description</span>
<div>{{{description}}}</div>
</div>
{{#if examples}}
<div class="parameter-examples">
<span class="option-header">Examples</span>
{{#each examples}}
<a class="parameter-examples" target="_blank" href={{this}}>{{getExampleName this}}</a>
{{/each}}
</div>
{{/if}}
</article>
{{/each}}
</script>
</div>
</div>
<div id="InputArraysList" class="section-content">
<a class="page-content-subheader" href="#InputArraysList">Input Arrays List</a>
<div class="InputArraysList-Content">
<script id="tmpl-InputArraysList" type="text/x-handlebars-template">
{{#each this}}
<article id={{getIdForLink name}}-IA class="parameter-cont">
<a class="parameter-name parameter-link" href={{getHrefForLink name}}-IA>{{title}}</a>
<span>
{{#if tags}}
{{#each tags}}
<a class="parameter-tag" id={{getIdForTagLink this}}>{{this}}</a>
{{/each}}
{{/if}}
</span>
{{#if description}}
<div class="parameter-description">
<span class="option-header">Description</span>
<div>{{{description}}}</div>
</div>
{{/if}}
<div class="parameter-format">
<span class="option-header">Snippet</span>
<div>{{{format}}}</div>
</div>
{{#if examples}}
<div class="parameter-examples">
<span class="option-header">Examples</span>
{{#each examples}}
<a class="parameter-examples" target="_blank" href={{this}}>{{getExampleName this}}</a>
{{/each}}
</div>
{{/if}}
</article>
{{/each}}
</script>
</div>
</div>
<div id="PropertyPreferences" class="section-content">
<a class="page-content-subheader" href="#PropertyPreferences">Property Preferences</a>
<div class="PropertyPreferences-Content">
<script id="tmpl-PropertyPreferences" type="text/x-handlebars-template">
{{#each this}}
<article id={{getIdForLink name}}-PP class="parameter-cont">
<a class="parameter-name parameter-link" href={{getHrefForLink name}}-PP>{{name}}</a>
<span>
{{#if tags}}
{{#each tags}}
<a class="parameter-tag" id={{getIdForTagLink this}}>{{this}}</a>
{{/each}}
{{/if}}
</span>
<div class="parameter-description">
<span class="option-header">Preference List</span>
<div>{{{preference}}}</div>
</div>
</article>
{{/each}}
</script>
</div>
</div>
<div id="Build" class="section-content">
<a class="page-content-subheader" href="#Build">Build with Grunt</a>
<article id="link-QuickStart" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-QuickStart">QuickStart</a>
<div class="Build-Content">
<ul>
<li>Install node from <a href="http://nodejs.org">http://nodejs.org</a>.</li>
<li>Run <code>npm install</code> in the CalenStyle's root directory to install grunt's dependencies.</li>
<li>Run <code>grunt</code>, which will run the default task, which runs <code>concat</code>, <code>copy</code>, <code>uglify</code> and <code>cssmin</code>.</li>
</ul>
</div>
</article>
<article id="link-PreconfiguredTasks" class="parameter-cont">
<a class="parameter-name parameter-link" href="#link-PreconfiguredTasks">Preconfigured Tasks</a>
<div class="PreconfiguredTasks-Content">
<ul>
<li>
<code>grunt</code> -
This is a Default Task.
<p>It is configured as an array of tasks.</p>
<ul>
<li>
<code>concat</code> - Default concat task, which concatenates all <span class="codepath">.js</span> files to create <span class="codepath">calenstyle.js</span>
</li>
<li>
<code>copy</code> - copies all <span class="codepath">.js</span> and <span class="codepath">.css</span> files from <span class="codepath">/src</span> folder to <span class="codepath">/dist</span> folder.
</li>
<li>
<code>uglify</code> - minifies javascript code
</li>
<li>
<code>cssmin</code> - concatenates <span class="codepath">/src/calenstyle.css</span> and <span class="codepath">/src/calenstyle-jquery-ui-override.css</span> to <span class="codepath">/dist/calenstyle.min.css</span> and minifies css.
</li>
</ul>
</li>
<li>
<code>grunt CalenStyleConcat</code> -
This command helps to build a <span class="codepath">/src/calenstyle-custom.js</span> by combining <span class="codepath">.js</span> files for specified views. After concatenation, <code>copy</code>, <code>uglify</code> and <code>cssmin</code> tasks will be performed.
<div>
For example -
<div>
<pre>grunt CalenStyleConcat:DetailedMonthView:WeekView:DayView</pre>
</div>
This command will build a custom script by combining code for DetailedMonthView, WeekView and DayView.
</div>
<div>
A list of valid arguments for this command
<ul>
<li><code>DetailedMonthView</code></li>
<li><code>MonthView</code></li>
<li><code>WeekView</code></li>
<li><code>DayView</code></li>
<li><code>CustomView</code></li>
<li><code>DayEventListView</code></li>
<li><code>DayEventDetailView</code></li>
<li><code>QuickAgendaView</code></li>
<li><code>AgendaView</code></li>
<li><code>WeekPlannerView</code></li>
<li><code>AppointmentDayView</code></li>
<li><code>FilterBar</code></li>
<li><code>DatePicker</code></li>
<li><code>Pickers</code></li>
</ul>
</div>
<div>
If you want to display <span class="codepath">DatePicker</span>, <span class="codepath">MonthPicker</span> and <span class="codepath">YearPicker</span>, then you will have to use arguments <code>DatePicker</code> and <code>Pickers</code>
respectively.
</div>
</li>
</ul>
</div>
</article>
</div>
</section>
</section>
<section class="nav-sidebar hidden-xs hidden-sm col-md-4 col-lg-4 small-scroll">
<ul class="nav nav-sidebar-list">
<li>
<a href="#Doc">Documentation</a>
<ul class="nav nav-sidebar-list">
<li>
<a href="#BasicUsage">Basic Usage</a>
</li>
<li>
<a href="#ParameterOptionsList">Parameter Options List</a>
<ul id="sidebar-ParameterOptionsList" class="nav nav-sidebar-list">
<script id="tmpl-sidebar-ParameterOptionsList" type="text/x-handlebars-template">
{{#each this}}
<li><a class="parameter-link" href={{getHrefForLink name}}>{{name}}</a></li>
{{/each}}
</script>
</ul>
</li>
<li>
<a href="#CallbackFunctionsList">Callback Functions List</a>
<ul id="sidebar-CallbackFunctionsList" class="nav nav-sidebar-list">
<script id="tmpl-sidebar-CallbackFunctionsList" type="text/x-handlebars-template">
{{#each this}}
<li><a class="parameter-link" href={{getHrefForLink name}}>{{#if title}}{{title}}{{else}}{{name}}{{/if}}</a></li>
{{/each}}
</script>
</ul>
</li>
<li>
<a href="#FunctionsList">Functions List</a>
<ul id="sidebar-FunctionsList" class="nav nav-sidebar-list">
<script id="tmpl-sidebar-FunctionsList" type="text/x-handlebars-template">
{{#each this}}
<li><a class="parameter-link" href={{getHrefForLink name}}>{{name}}</a></li>
{{/each}}
</script>
</ul>
</li>
<li>
<a href="#InputArraysList">Input Arrays List</a>
<ul id="sidebar-InputArraysList" class="nav nav-sidebar-list">
<script id="tmpl-sidebar-InputArraysList" type="text/x-handlebars-template">
{{#each this}}
<li><a class="parameter-link" href={{getHrefForLink name}}-IA>{{title}}</a></li>
{{/each}}
</script>
</ul>
</li>
<li>
<a href="#PropertyPreferences">Property Preferences</a>
<ul id="sidebar-PropertyPreferences" class="nav nav-sidebar-list">
<script id="tmpl-sidebar-PropertyPreferences" type="text/x-handlebars-template">
{{#each this}}
<li><a class="parameter-link" href={{getHrefForLink name}}-PP>{{name}}</a></li>
{{/each}}
</script>
</ul>
</li>
<li>
<a href="#Build">Build with Grunt</a>
</li>
</ul>
</li>
</ul>
</section>
<section class="tag-filter small-scroll">
<div class="tag-filter-cont">
<span class="tag-filter-title">Filter with Tags</span>
<span class="tag-filter-close">✖</span>
<ul class="tag-filter-content">
<script id="tmpl-Tags" type="text/x-handlebars-template">
{{#each this}}
<li><a class="filter-link" id={{getIdForTagLink this}}>{{this}}</a></li>
{{/each}}
</script>
</ul>
</div>
</section>
</section>
<a class="BackToTop cs-po-icon-circle-up" href="#Doc"></a>
<div id="footerlinks">
<div class="container">
<a href="https://github.com/nehakadam/CalenStyle/wiki/Roadmap">Roadmap</a>
<a href="https://github.com/nehakadam/CalenStyle/releases">Changelog</a>
<a href="https://github.com/nehakadam/CalenStyle/issues">Report Bug</a>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="footer-copyright col-xs-12 col-sm-12 col-md-6 col-lg-6">
<span> © <span id="footer-year"></span> <a href="http://lajpatshah.in/">Lajpat Shah</a>. All rights reserved.
</span>
</div>
<div class="footer-content-links col-xs-12 col-sm-12 col-md-6 col-lg-6">
<span class="social-list">
<a class="facebook" href="http://www.facebook.com/curiouslala">
<i class="cs-po-icon-facebook"></i>
</a>
<a class="twitter" href="https://twitter.com/lajpat">
<i class="cs-po-icon-twitter"></i>
</a>
<a class="google" href="https://plus.google.com/100425525215161548641/posts">
<i class="cs-po-icon-google-plus"></i>
</a>
<a class="linkedin" href="http://in.linkedin.com/in/lajpat"><i class="cs-po-icon-linkedin"></i></a>
<a class="youtube" href="http://www.youtube.com/user/curiouslajpat">
<i class="cs-po-icon-youtube"></i>
</a>
<a class="github" href="https://github.com/lajpatshah">
<i class="cs-po-icon-github"></i>
</a>
</span>
</div>
</div>
</footer>
</body>
</html>