This time I will share jQuery Plugin and tutorial about jQuery Calendar Plugin Using HTML Templates – CLNDR.js, hope it will help you in programming stack.
| File Size: | 70.6 KB |
|---|---|
| Views Total: | 49606 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
CLNDR.js is a jQuery plugin that allows you to create a pretty clean calendar with event support using HTML template.
You might also like:
- Flexible and Multi-Language jQuery Calendar & Datepicker Plugin – Ion.Calendar
- jQuery Plugin For Displaying Your Google Calendar Events – myEvents
- jQuery Google Calendar Event List Widget – gCalFlow
- Simple jQuery Calendar and Schedule Plugin For Bootstrap – Bic Calendar
- jQuery Plugin for World Calendars – calendars
- Full Size and Drag & Drop Calendar Plugin – FullCalendar
- 10 Best JavaScript/jQuery Calendar Plugins For Scheduled Events
Install & download:
1 |
# NPM |
2 |
$ npm install clndr --save |
How to use it:
1. Include jQuery javascript library and jQuery.clndr.js script on your web page.
1 |
<script src="js/jquery.js"></script> |
2 |
<script src="js/clndr.js"></script> |
3 |
4 |
<-- Or From The CDN --> |
5 |
<script src="https://unpkg.com/clndr@latest/src/clndr.js"></script> |
2. Include moment.js and underscore.js on the page.
1 |
<script src="js/moment.js" type="text/javascript"></script> |
2 |
<script src="js/underscore.js" type="text/javascript"></script> |
3. Create the html template for the calendar.
01 |
<div id="full-clndr" class="clearfix"> |
02 |
<script type="text/template" id="full-clndr-template"> |
03 |
<div class="clndr-<a href="https://www.jqueryscript.net/tags.php?/grid/">grid</a>"> |
04 |
<div class="days-of-the-week clearfix"> |
05 |
<% _.each(daysOfTheWeek, function(day) { %> |
06 |
<div class="header-day"><%= day %></div> |
07 |
<% }); %> |
08 |
</div> |
09 |
<div class="days clearfix"> |
10 |
<% _.each(days, function(day) { %> |
11 |
<div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div> |
12 |
<% }); %> |
13 |
</div> |
14 |
</div> |
15 |
<div class="event-listing"> |
16 |
<div class="event-listing-title">EVENTS THIS MONTH</div> |
17 |
<% _.each(eventsThisMonth, function(event) { %> |
18 |
<div class="event-item"> |
19 |
<div class="event-item-name"><%= event.title %></div> |
20 |
<div class="event-item-location"><%= event.location %></div> |
21 |
</div> |
22 |
<% }); %> |
23 |
</div> |
24 |
</script> |
25 |
</div> |
4. The javascript to generate a calendar from the template.
01 |
var clndr = {}; |
02 |
03 |
$( function() { |
04 |
05 |
var currentMonth = moment().format('YYYY-MM'); |
06 |
var nextMonth = moment().add('month', 1).format('YYYY-MM'); |
07 |
08 |
var events = [ |
09 |
{ <a href="https://www.jqueryscript.net/time-clock/">date</a>: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' }, |
10 |
{ date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' }, |
11 |
{ date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' }, |
12 |
{ date: nextMonth + '-' + '07', title: 'Small Cat Photo Session', location: 'Center for Cat Photography' } |
13 |
]; |
14 |
15 |
clndr = $('#full-clndr').clndr({ |
16 |
template: $('#full-clndr-template').html(), |
17 |
events: events |
18 |
}); |
19 |
}); |
5. All the options to customize the calendar.
001 |
$('.parent-element').clndr({ |
002 |
003 |
/* |
004 |
[{ |
005 |
end: '2013-11-08', |
006 |
start: '2013-11-04', |
007 |
title: 'Monday to Friday Event' |
008 |
}, { |
009 |
end: '2013-11-20', |
010 |
start: '2013-11-15', |
011 |
title: 'Another Long Event' |
012 |
}]; |
013 |
*/ |
014 |
events: [], |
015 |
016 |
// the template: this could be stored in markup as a <script type="text/template"></script> |
017 |
// or pulled in as a string |
018 |
template: clndrTemplate, |
019 |
020 |
// determines which month to start with using either a date string or a moment object. |
021 |
startWithMonth: "YYYY-MM-DD" or moment(), |
022 |
023 |
// start the week off on Sunday (0), Monday (1), etc. Sunday is the default. |
024 |
// WARNING: if you are dealing with i18n and multiple languages, you probably |
025 |
// don't want this! See the "Internationalization" section below for more. |
026 |
weekOffset: 0, |
027 |
028 |
// an array of day abbreviation labels. If you have moment.js set to a different language, |
029 |
// it will guess these for you! If for some reason that doesn't work, use this... |
030 |
// WARNING: if you are dealing with i18n and multiple languages, you probably |
031 |
// don't want this! See the "Internationalization" section below for more. |
032 |
daysOfTheWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], |
033 |
034 |
// Optional callback function that formats the day in the header. If none |
