Remplacer le numéro de jour avec lien à l'événement dans jQuery Fullcalendar

Question

J'utilise jQuery Fullcalendar de arshaw.com/fullcalendar/ et je voudrais remplacer le numéro de jour avec lien à l'événement, que je reçois via la base de données JSON, comme sur cette image :

J'ai petit calendrier avec seulement un événement par jour, si l'affichage par défaut est pas nécessaire pour moi. Je besoin de quelque chose plus simple et plus propre.

Depuis que je ne suis pas très familier avec jQuery je ne peux pas moi-même.

Est-il possible de le remplacer:

<div class="fc-day-number">5</div>

avec lien à l'événement ce jour-là?

Answer 1

Sans modifier le code source du script de création de calendrier, vous pouvez obtenir le résultat souhaité avec un peu de hacking. Supposons que vous avez un objet JavaScript qui contient vos URL d'événement comme ceci:

var urls = {
    4: "http://mydomain.com/event.html",
    16: "http://mydomain.com/event2.html",
    22: "http://mydomain.com/event.html"
}

Cela peut être le résultat d'une demande de JSON. Vous pouvez ensuite en boucle à travers tous les jours dans le calendrier et vérifier s'il y a un lien pour ce jour-là, puis mettez à jour le numéro de jour pour contenir le lien:

$('.fc-day-number').each(function() {
    // Get current day
    var day = parseInt($(this).html());

    // Check if there's a url defined for the day
    if(urls[day] != undefined) {
        // Replace the day number with the link
        $(this).html('<a href="' + urls[day] + '">' + day + '</a>');
    }
});

Il suffit de lancer cet extrait chaque fois que le calendrier est chargé / ouvert. Sans en savoir plus sur le calendrier, il est impossible de dire où cet extrait doit être exactement situé.

Answer 2

Vous avez juste besoin de faire une modification rapide dans votre fullcalendar.js

• Ajout du lien à la création
• Ajout du lien au retraçage des choses .. cellules

Il suffit de remplacer cette ligne:

(showNumbers ? "<div class='fc-day-number'>" + d.getDate() + "</div>" : '') +

avec cette ligne:

(showNumbers ? "<div class='fc-day-number'><a href=\"myURL.com\">" + d.getDate() + "</a></div>" : '') +

puis, cette ligne:

td.find('div.fc-day-number').text(d.getDate());

avec cette ligne:

td.find('div.fc-day-number').html("<a href=\"myURL.com\">"+d.getDate()+"<a\>");

Profitez;)

Foo.