Hoe de geselecteerde datums in de gebruikersinterface van jQuery Datepicker te linken?

Kan iemand helpen met deze taak? Ik ben geen Javascript-goeroe en ben een beetje blijven steken. Ik gebruik een jQuery Datepicker UI om een ​​evenementenkalender te maken.

Ik wil de geselecteerde datums (met de namen van gebeurtenissen) aan de juiste gebeurtenis koppelen (afzonderlijke pagina of anker). Hier is het script dat ik gebruik om mijn evenementen te specificeren:

$(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


    }});
});

Hier is de jsFiddle met deze kalender.

Het belangrijkste doel is aangepaste Tooltips te maken voor de geselecteerde datums (Uitgelichte evenementen) en deze datums klikbaar te maken.

Bij voorbaat dank!

 1
toegevoegd bewerkt
Bekeken: 4
de bron

2 antwoord

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

<div id="datepicker"></div>
<div id="popup" class="popup">
    
Default popup

</div>
<div id="popup1"class="popup">
    
Popup for event1

</div>
<div id="popup2"class="popup">
    
Popup for event1

</div>

...

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" );
                }
            }
        });
    }
}

UITGEWERKT VOOR EXTRA GEVRAAGDE FUNCTIONALITEIT

1
toegevoegd
de bron
heb je de toevoeging van aangepaste pop-ups bekeken?
toegevoegd de auteur Sinetheta, de bron
Dank daarvoor! Werkt goed! Is er een mogelijkheid om een ​​specifieke popup te maken voor elke evenementdatum, dus wanneer ik op verschillende datums klik, kan ik verschillende berichten (pop-ups) lezen? Nogmaals bedankt.
toegevoegd de auteur axidos, de bron
Ik heb het net getest. Dit is gewoon geweldig! Precies wat ik zocht. Erg bedankt!
toegevoegd de auteur axidos, de bron 
 $('#datepicker').datepicker({
    beforeShowDay: function(date) {},
    onSelect: function(dateText, inst){}
  });

Je vindt de evenementen die je nodig hebt in de documentatie:

http://docs.jquery.com/UI/Datepicker#event-onSelect

ook, hier is de functie voor uw tooltips:

http://docs.jquery.com/UI/Datepicker#event-beforeShowDay

0
toegevoegd
de bron
waar heb je problemen mee in het voorbeeld dat ik je gaf?
toegevoegd de auteur Chris Biscardi, de bron
Ik weet niet wat je wilt doen in je functies. Binnenin de functie onSelect is dateText de dag waarop is geklikt. Je moet andere Javascript-functies van binnenuit onSelect om iets met die informatie te doen.
toegevoegd de auteur Chris Biscardi, de bron
Hoi. bedankt voor het antwoord. Ik heb deze documentatie gelezen, maar mijn JavaScript-kennis is beperkt. Ik heb enkele voorbeelden nodig over hoe ik kan implementeren wat ik nodig heb. Ik denk dat het nuttig zou zijn voor veel mensen zoals ik om dit allemaal te leren.
toegevoegd de auteur axidos, de bron
Ik wil gewoon op de geselecteerde datum klikken en een hyperlink naar de informatie (op dezelfde pagina of afzonderlijk) maken voor de gebeurtenis die op deze datum zal plaatsvinden. Ik weet niet hoe ik dit moet doen.
toegevoegd de auteur axidos, de bron