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.
356 lines (235 loc) • 13.2 kB
HTML
<html>
<head>
<title>Mobile Example 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 Mobile Devices</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>
<li>
You will not be able to see output of jQuery Mobile example on latest versions of Chrome, since Chrome gives a Security Error. Please check it on some other browser.
</li>
</ul>
</div>
<div class="acc-container">
<ol>
<li>
<a class="acc-btn" href="Mobile/QuickUse-Default.htm">
<span class="btnTitle">Default View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-Month_Events_List.htm">
<span class="btnTitle">Month View with Event List</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/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="Mobile/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="Mobile/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="Mobile/View-Month_Custom_Events_List.htm">
<span class="btnTitle">Custom Event Indicator in Month View with EventList</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-Month_Custom_Events_Dialog.htm">
<span class="btnTitle">Custom Event Indicator in Month View with Dialog</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-Month_Custom_EventCount_List.htm">
<span class="btnTitle">Custom View (e.g. Event Count Indicator) in Month View with EventList</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-Month_Custom_EventCount_Dialog.htm">
<span class="btnTitle">Custom View (e.g. Event Count Indicator) in Month View with Dialog</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-Appointment.htm">
<span class="btnTitle">Appointment View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/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="Mobile/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="Mobile/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>
<li>
<a class="acc-btn" href="Mobile/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="Mobile/View-Detail_Week.htm">
<span class="btnTitle">Week View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/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="Mobile/View-QuickAgenda.htm">
<span class="btnTitle">Quick Agenda View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-TaskPlanner.htm">
<span class="btnTitle">Task Planner View</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-Agenda_Timeline1.htm">
<span class="btnTitle">Agenda View - Timeline 1</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-Agenda_Timeline2.htm">
<span class="btnTitle">Agenda View - Timeline 2</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-Agenda_Timeline3.htm">
<span class="btnTitle">Agenda View - Timeline 3</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/View-WeekPlanner.htm">
<span class="btnTitle">Week Planner</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/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="Mobile/QuickUse-jQueryMobile.htm">
<span class="btnTitle">CalenStyle with jQuery Mobile</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/Angular/CalExampleAngular.htm">
<span class="btnTitle">CalenStyle with AngularJS</span>
<span class="btnDemo">View Demo</span>
</a>
</li>
<li>
<a class="acc-btn" href="Mobile/ionic/www/index.html">
<span class="btnTitle">CalenStyle with ionic</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>