Plugin jQuery Calendario: ecco come realizzare un calendario veloce
Oggi nella puntata dedicata alle Risorse Utili e a jQuery, andiamo a scoprire il plugin CLNDR.js. Come avete capito dal titolo e sicuramente dalla query che vi a portato all’interno di questo articolo, andiamo a vedere come utilizzare CLNDR.js, che volgarmente possiamo definire come: Plugin jQuery Calendario.
Il plugin CLNDR.js è a sua volta basato su moment.js e underscore.js che vi darà la possibilità di realizzare un calendario con il supporto di eventi utilizzano un template HTML.
Come si utilizza Plugin jQuery Calendario
Come prima cosa andiamo a introdurre all’interno del nostro progetto le librerie necessarie:
<script src="js/jquery2.js" type="text/javascript"></script> <script src="js/clndr.js" type="text/javascript"></script>
Adesso andiamo a includere anche moment.js e underscore.js:
<script src="js/moment.js" type="text/javascript"></script> <script src="js/underscore.js" type="text/javascript"></script>
Passiamo alla parte HTML del nostro Plugin jQuery Calendario:
<div id="full-clndr" class="clearfix">
<script type="text/template" id="full-clndr-template">
<div class="clndr-<a href="http://www.jqueryscript.net/tags.php?/grid/">grid</a>">
<div class="days-of-the-week clearfix">
<% _.each(daysOfTheWeek, function(day) { %>
<div class="header-day"><%= day %></div>
<% }); %>
</div>
<div class="days clearfix">
<% _.each(days, function(day) { %>
<div class="<%= day.classes %>" id="<%= day.id %>"><span class="day-number"><%= day.day %></span></div>
<% }); %>
</div>
</div>
<div class="event-listing">
<div class="event-listing-title">EVENTS THIS MONTH</div>
<% _.each(eventsThisMonth, function(event) { %>
<div class="event-item">
<div class="event-item-name"><%= event.title %></div>
<div class="event-item-location"><%= event.location %></div>
</div>
<% }); %>
</div>
</script>
</div>
Per far funzionare tutto e far lavorare al meglio il nostro Plugin jQuery Calendario, abbiamo bisogno della seguente parte scritta in JavaScript:
var clndr = {};
$( function() {
var currentMonth = moment().format('YYYY-MM');
var nextMonth = moment().add('month', 1).format('YYYY-MM');
var events = [
{ <a href="http://www.jqueryscript.net/time-clock/">date</a>: currentMonth + '-' + '10', title: 'Persian Kitten Auction', location: 'Center for Beautiful Cats' },
{ date: currentMonth + '-' + '19', title: 'Cat Frisbee', location: 'Jefferson Park' },
{ date: currentMonth + '-' + '23', title: 'Kitten Demonstration', location: 'Center for Beautiful Cats' },
{ date: nextMonth + '-' + '07', title: 'Small Cat Photo Session', location: 'Center for Cat Photography' }
];
clndr = $('#full-clndr').clndr({
template: $('#full-clndr-template').html(),
events: events
});
});
Concludiamo questo post dedicato al Plugin jQuery Calendario o meglio al CLNDR.js, segnalandovi tutte le impostazioni:
$('.parent-element').clndr({
// the template: this could be stored in markup as a <script type="text/template"></script>
// or pulled in as a string
template: clndrTemplate,
// determines which month to start with using either a date string or a moment object.
startWithMonth: "YYYY-MM-DD" or moment(),
// start the week off on Sunday (0), Monday (1), etc. Sunday is the default.
// WARNING: if you are dealing with i18n and multiple languages, you probably
// don't want this! See the "Internationalization" section below for more.
weekOffset: 0,
// an array of day abbreviation labels. If you have moment.js set to a different language,
// it will guess these for you! If for some reason that doesn't work, use this...
// WARNING: if you are dealing with i18n and multiple languages, you probably
// don't want this! See the "Internationalization" section below for more.
daysOfTheWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
// the target classnames that CLNDR will look for to bind events.
// these are the defaults.
targets: {
nextButton: 'clndr-next-button',
previousButton: 'clndr-previous-button',
nextYearButton: 'clndr-next-year-button',
previousYearButton: 'clndr-previous-year-button',
todayButton: 'clndr-today-button',
day: 'day',
empty: 'empty'
},
// custom classes to avoid styling issues. pass in only the
// classnames that you wish to override.
// these are the defaults.
classes: {
today: "today",
event: "event",
past: "past",
lastMonth: "last-month",
nextMonth: "next-month",
adjacentMonth: "adjacent-month",
inactive: "inactive"
}
// click callbacks! the keyword 'this' is set to the clndr instance in all callbacks.
clickEvents: {
// fired whenever a calendar box is clicked.
// returns a 'target' object containing the DOM element, any events,
// and the date as a moment.js object.
click: function(target){ },
// fired when a user goes forward a month.
// returns a moment.js object set to the correct month.
nextMonth: function(month){ },
// fired when a user goes back a month.
// returns a moment.js object set to the correct month.
previousMonth: function(month){ },
// fired when the next year button is clicked.
// returns a moment.js object set to the correct month and year.
nextYear: function(month) { },
// fired when the previous year button is clicked.
// returns a moment.js object set to the correct month and year.
previousYear: function(month) { },
// fires any time the month changes as a result of a click action.
// returns a moment.js object set to the correct month.
onMonthChange: function(month) { },
// fires any time the year changes as a result of a click action.
// if onMonthChange is also set, it is fired BEFORE onYearChange.
// returns a moment.js object set to the correct month and year.
onYearChange: function(month) { },
// fired when a user goes to the current month & year.
// returns a moment.js object set to the correct month.
today: function(month){ }
},
// this is called only once after clndr has been initialized and rendered.
// use this to bind custom event handlers that don't need to be re-attached
// every time the month changes (most event handlers fall in this category).
// hint: this.element refers to the parent element that holds the clndr,
// and is a great place to attach handlers that don't get tossed out every
// time the clndr is re-rendered.
ready: function() { },
// a callback when the calendar is done rendering.
// This is a good place to bind custom event handlers
// (also see the 'ready' option above).
doneRendering: function(){ },
// an array of event objects
events: [],
// if you're supplying an events array, dateParameter points to the
// field in your event object containing a date string.
// It's set to 'date' by default.
dateParameter: 'date',
// CLNDR can accept events lasting more than one day!
// just pass in the multiDayEvents option and specify what the start and
// end fields are called within your event objects. See the example file
// for a working instance of this.
multiDayEvents: {
startDate: 'startDate',
endDate: 'endDate',
// if you also have single day events with a different date field,
// use the singleDay property and point it to the date field.
singleDay: 'date'
},
// show the dates of days in months adjacent to the current month.
// defaults to true.
showAdjacentMonths: true,
// when days from adjacent months are clicked, switch the current month.
// fires nextMonth/previousMonth/onMonthChange click callbacks. defaults to false.
adjacentDaysChangeMonth: false,
// always make the calendar six rows tall (42 days) so that every month has a
// consistent height. defaults to 'false'.
forceSixRows: false,
// anything you want access to in your template
extras: { }
// if you want to use a different templating language, here's your ticket.
// Precompile your template (before you call clndr),
// pass the data from the render function into your template,
// and return the result. The result must be a string containing valid markup.
// The keyword 'this' is set to the clndr instance
// in case you need access to any other properties.
// More under 'Template Rendering Engine' below.
render: function(data){
return '<div class="html data as a string"></div>';
},
// if you want to prevent the user from navigating the calendar outside
// of a certain date range (e.g. if you are making a datepicker), specify
// either the startDate, endDate, or both in the constraints option. You
// can change these while the calendar is on the page... See documentation
// below for more on this!
constraints: {
startDate: '2017-12-22',
endDate: '2018-01-09'
}
});
});
Ecco adesso, se tutto è andato come si deve, dovreste ricevere questo risultato: DEMO.
Se considerate che il Plugin jQuery Calendario, è proprio la risorsa che stavate cercando e se pensate che sia molto semplice da configurare con il vostro progetto, non ci resta altro da fare che segnalarvi il link da dove scaricare questo plugin.
Download Plugin jQuery Calendario
Per il momento questo è tutto, continuate a seguirci per altri consigli utili dal mondo jQuery.
Seguiteci anche su Facebook, Google Plus, Tumblr e Twitter, per restare sempre in contatto con noi e con le nostre guide.
Blogger e Sviluppatore, appassionato sin da piccolo dell’informatica e di tutta la tecnologia.
