Artigo Original por ByteCyclist
jMonthCalendar é um calendário completo que suporta eventos. Você simplesmente inicializa o calendário com um array de opções e eventos e ele cuida do resto. O plugin tem pontos de extenções que permite ao desenvolvedor a interagir com o calendário quando a ele está prestes a mudar de mês, depois que ele mudou de mês e quando bolhas de eventos são clicadas. jMonthCalendar agora suporta extenções de passagem do mouse em pontos, sobre eventos e engatilha um evento como um alert(); Por padrão cada evento deve ter uma URL associada que irá direcionar para a página de detalhes.
Google Code Home: http://code.google.com/p/jmonthcalendar/
Downloads: http://code.google.com/p/jmonthcalendar/downloads/list
jQuery Project Home Page
Download 1.2.0 directly
Recursos
- Compátivel jQuery 1.3.0
- Habilidade de carregar eventos
- Extenções configuráveis: onMonthChanging, onMonthChanged, onEventClick
- Links dos eventos para página de detalhes por padrão
Usos e Códigos de Exemplo
A forma mais simples de usar o plugin é usar este html em algum lugar da sua página:
<div id="jMonthCalendar"></div>
E usar este Javascript:
$().ready(function() {
var options = { };
var events = [ ];
$.jMonthCalendar.Initialize(options, events);
});
Se você quer fazer alguma coisa mais avançada, é necessário mexer nas opções configuráveis que o componente lhe oferece através da variável options. Você pode ver como podem ser definidas funções customizadas em pontos específicos. Pode-se ver também que o nome dos meses podem ser traduzidos facilmente. Note o novo onEventBlockOver e onEventBlockOut; isto irá permitir você sinalizar um alerta ou um pop-up do estilo balão.
var options = {
height: 650,
width: 980,
navHeight: 25,
labelHeight: 25,
firstDayOfWeek: 0,
navLinks: {
p:'Prev',
n:'Next',
t:'Today'
},
onMonthChanging: function(dateIn) { return true; },
onMonthChanged: function(dateIn) { return true; },
onEventClick: function(event) { return true; },
onEventBlockOver: function(event) { return true; },
onEventBlockOut: function(event) { return true; },
onDayLinkClick: function(date) { return true; },
onDayCellClick: function(date) { return true; },
locale: {
days: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
daysShort: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
daysMin: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"],
months: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
monthsShort: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
weekMin: 'wk'
}
};
Para os eventos, esta é a forma como eu posso definir o que vai ser executado, caso você queira fazer alguma coisa diferente pode modificar o fonte do plugin ou simplesmente mapear para este array. Eu estou planejanto usar este plugin em uma aplicação MVC e irei simplesmente serializar meu objeto para JSON.
var events = [
{ "EventID": 1, "StartDate": new Date(2009, 1, 12), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "This is a sample event description", "CssClass": "Birthday" },
{ "EventID": 2, "Date": "2009-02-28T00:00:00.0000000", "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "This is a sample event description", "CssClass": "Meeting" },
];
Você não está limitado a apenas carregar eventos quando o calendário é inicializado. Você pode usar chamadas AJAX para buscar mais eventos do seu servidor baseados na data que o calendário está mostrando. Nota: Você deve usar a chamada AJAX no evento onMonthChanging. Este evento é disparado antes do calendário desenhar os eventos.
//Set a function to get more events, this could be an AJAX call to the server as well.
var options = {
onMonthChanging: function(dateIn) {
//this could be an Ajax call to the backend to get this months events
var events = [
{ "EventID": 1, "StartDate": new Date(2009, 1, 1), "Title": "10:00 pm - EventTitle1", "URL": "#", "Description": "", "CssClass": "Birthday" },
{ "EventID": 2, "StartDate": new Date(2009, 1, 2), "Title": "9:30 pm - this is a much longer title", "URL": "#", "Description": "", "CssClass": "Meeting" }
];
$.jMonthCalendar.ReplaceEventCollection(events);
return true;
}
}; //on a button click, add more the the calendar.
$("#Button").click(function() {
//extraEvents could be a call to the server or anything else that can produce a JSON array
$.jMonthCalendar.AddEvents(extraEvents);
}); //you could also set/change the month from an external source
$("#ChangeMonth").click(function() {
$.jMonthCalendar.ChangeMonth(new Date(2008, 4, 7));
});
Postagens
