Может ли кто-нибудь помочь в решении этой задачи? Я не гуру javascript и немного застрял. Я использую jQuery Datepicker UI для создания календаря событий.
Я хочу связать выбранные даты (имена событий) с соответствующим событием (отдельная страница или якорь). Вот сценарий, который я использую, чтобы указать мои события:
$(function() {
//format: specialDays.year.month.day
var specialDays = {
'2011': {
'10': {
'1': {content: "Event numer 1", className: "museumevent"},
'2': {content: "Event numer 2", className: "museumevent"},
'3': {content: "Event numer 3", className: "museumevent"},
'4': {content: "Event numer 4", className: "museumevent"},
'5': {content: "Event numer 5", className: "museumevent"},
'6': {content: "Event numer 6", className: "museumevent"},
'7': {content: "Event numer 7", className: "museumevent"},
'8': {content: "Event numer 8", className: "museumevent"},
'9': {content: "Event numer 9", className: "museumevent"},
'10': {content: "Event numer 10", className: "museumevent"},
'11': {content: "Event numer 11", className: "museumevent"},
'12': {content: "Event numer 12", className: "museumevent"},
'13': {content: "Event numer 13", className: "museumevent"},
'25': {content: "Event numer 14", className: "museumevent"},
'26': {content: "Event numer 15", className: "museumevent"},
'27': {content: "Event numer 16", className: "museumevent"},
'28': {content: "Event numer 17", className: "museumevent"} }
}
};
$('#datepicker').datepicker({beforeShowDay: function(date) {
var d = date.getDate(),
m = date.getMonth()+1,
y = date.getFullYear();
if (specialDays[y] && specialDays[y][m] && specialDays[y][m][d]) {
var s = specialDays[y][m][d];
return [true, s.className, s.content];//selectable
}
return [false,''];//non-selectable
}});
});
Вот этот jsFiddle .
Основная цель - создать пользовательские подсказки для выбранных дат (Избранные события) и сделать эти даты кликабельными .
Заранее спасибо!
If you're already using the jQuery UI then I would advise using their modals for your "popup". I have also added some functionality for individualised popups (requested in comment) with a fallback "defauilt".jsFIddle
Default popup
Popup for event1
Popup for event1
...
var specialDays = {
'2011': {
'10': {
'1': {
content: "Event numer 1",
className: "museumevent",
popupID: "popup1"
}
...
onSelect: function(dateText, inst){
var d = parseInt(dateText.split("/")[1], 10),
m = parseInt(dateText.split("/")[0], 10),
y = parseInt(dateText.split("/")[2], 10);
if ( specialDays[y][m][d].hasOwnProperty("popupID") ) {
var s = specialDays[y][m][d];
$('#' + s.popupID).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}else{
$('#popup').find('.date').text(dateText).end()
.dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
}
}
ДЛЯ СОЗДАНИЯ ДОПОЛНИТЕЛЬНОЙ ЗАПРОСНОЙ ФУНКЦИОНАЛЬНОСТИ
$('#datepicker').datepicker({
beforeShowDay: function(date) {},
onSelect: function(dateText, inst){}
});
Вы можете найти необходимые события в Документации:
http://docs.jquery.com/UI/Datepicker#event-onSelect
также, вот функция для ваших всплывающих подсказок: