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.
516 lines (340 loc) • 13.6 kB
HTML
<html>
<head>
<title>Examples List - CalenStyle</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="../doc/css/common.css" />
<link rel="stylesheet" type="text/css" href="../doc/css/pr.css" />
<link rel="stylesheet" type="text/css" href="../doc/css/details.css" />
<link rel="stylesheet" type="text/css" href="../doc/css/doc.css" />
<link rel="stylesheet" type="text/css" href="../doc/css/CS-Portal-Font.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript">
$(document).ready(function()
{
$("#footer-year").text(new Date().getFullYear());
});
</script>
</head>
<body>
<div class="jumbotron">
<h1 class="text-center doc-header">CalenStyle</h1>
<h3 class="text-center doc-descr">Visual and Functional Demonstration of CalenStyle for Web</h3>
</div>
<div class="acc-container">
<ul class="doc-note">
<li>
While viewing demo on Firefox if you can not see font icons, it is because of folder structure of CalenStyle plugin distribution folder and Strict Origin Policy of Firefox.
While implementing CalenStyle when you will keep the folder structure simple, you will be able to see icon fonts.
Check <a href="https://nehakadam.github.io/CalenStyle/content/demo.htm">CalenStyle Demo</a>.
</li>
</ul>
</div>
<div class="acc-container">
<ol>
<li>
<a class="acc-btn" href="QuickUse-Default.htm">
<span class="btnTitle">Default View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="QuickUse-Default_DatePicker_EventList.htm">
<span class="btnTitle">Default View with DatePicker</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-DetailedMonth.htm">
<span class="btnTitle">Detailed Month View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-DetailedMonth_ShowExtraEvents.htm">
<span class="btnTitle">Detailed Month View with All Events</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-DetailedMonth_HideExtraEvents.htm">
<span class="btnTitle">Detailed Month View with Hidden Events</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Section-FilterRight.htm">
<span class="btnTitle">Detailed Month View with Event Filtering</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Month_Events_List.htm">
<span class="btnTitle">Month View with Event List (Events)</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Month_Events_Dialog.htm">
<span class="btnTitle">Month View with Dialog (Events)</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Month_DayHighlight_List.htm">
<span class="btnTitle">Month View with Event List (Day Highlight)</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Month_DayHighlight_Dialog.htm">
<span class="btnTitle">Month View with Dialog (Day Highlight)</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Month_Events_Hidden.htm">
<span class="btnTitle">Month View with Hidden Events</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Detail_Week.htm">
<span class="btnTitle">Week View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Detail_Custom_Days.htm">
<span class="btnTitle">Detail View with Custom Number Of Days</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Detail_Day.htm">
<span class="btnTitle">Day View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-QuickAgenda.htm">
<span class="btnTitle">Quick Agenda View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-TaskPlanner.htm">
<span class="btnTitle">Task Planner View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Data-RestrictedSection.htm">
<span class="btnTitle">Restricted Section and Resource Area</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-DayList_DayEventList.htm">
<span class="btnTitle">Day Event List View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-DayList_DayEventDetail.htm">
<span class="btnTitle">Day Event Detail View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Appointment.htm">
<span class="btnTitle">Appointment View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Agenda_Timeline1.htm">
<span class="btnTitle">Agenda View - Timeline1</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Agenda_Timeline2.htm">
<span class="btnTitle">Agenda View - Timeline2</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Agenda_Timeline3.htm">
<span class="btnTitle">Agenda View - Timeline3</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Agenda_User.htm">
<span class="btnTitle">Agenda View with Custom Event List</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-WeekPlanner.htm">
<span class="btnTitle">Week Planner</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Callback-EventClicked_Popover.htm">
<span class="btnTitle">Custom Action on Event Click</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Callback-EventsAdded_Tooltip.htm">
<span class="btnTitle">Custom Tooltip on Event Hover</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Callback-EventRendered_CustomizedEventUI.htm">
<span class="btnTitle">Customize Event UI on EventRendered</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Section-Header_Custom_1.htm">
<span class="btnTitle">Custom Settings - Header1</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Section-Header_Custom_2.htm">
<span class="btnTitle">Custom Settings - Header2</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Section-Header_Custom_3.htm">
<span class="btnTitle">Custom Settings - Header3</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Section-Header_NonCalenStyle.htm">
<span class="btnTitle">Custom Settings - Non-CalenStyle Header</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="QuickUse-WidthBasedRendering.htm">
<span class="btnTitle">Dynamic View based on Calendar Width</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Callback-CellClicked_AddEvent.htm">
<span class="btnTitle">Add Event on CalenStyle View Clicked</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Other-DestroyObject.htm">
<span class="btnTitle">Destroy CalenStyle Object</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="QuickUse-Fullscreen.htm">
<span class="btnTitle">Toggle between Standard and Fullscreen Views</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Data-JSON.htm">
<span class="btnTitle">Loading Data From JSON</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Data-GoogleCalendar.htm">
<span class="btnTitle">Google Calendar Events</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Data-URL.htm">
<span class="btnTitle">Loading Data From URL</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Other-Internationalization.htm">
<span class="btnTitle">Internationalization Example</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Month_Custom_Events_Dialog.htm">
<span class="btnTitle">Custom Event Indicator in Month View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-Month_Custom_EventCount_Dialog.htm">
<span class="btnTitle">Custom View (e.g. Event Count Indicator) in Month View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-DayList_DayEventList_Custom_Event.htm">
<span class="btnTitle">Custom Event Indicator in Day Event List View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="View-DayList_DayEventList_Custom_EventCount.htm">
<span class="btnTitle">Custom View (e.g. Event Count Indicator) in Day Event List View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
</ol>
</div>
<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>