Quelques remarques

[madsenfr]

Vraiment bien, je vais certainement l'utiliser prochainement.

1. Le titre de la colonne des n° de semaines n'est pas traduit ("W" en français).
2. Sur l'exemple des n° de semaine (http://www.bootstrap-year-calendar.com/#Examples/Weeks number), il me semble que les 3 premières lignes de la fonction sont inutiles.
3. Tous les exemples sont sur 2015, or depuis peu le calendrier apparaît sur 2016. Ça serait bien de mettre les exemples sur 2016.

[Paul-DS]

J'ai corrigé ces problèmes (point n°1 via le commit d5edb36).

Merci pour tes remarques ! Et n'hésites pas si tu trouve d'autres bugs/incohérences ou que tu as des idées/besoins d'évolutions.

[madsenfr]

Merci pour ta réactivité.

J'aurais besoin de modifier le style background pour que les premiers et derniers jours d'une réservation soient à moitié coloriés.
Comme ton code est ouvert, je pense créer 2 styles, Triangle Bottom Right et Triangle Top Left cf. https://css-tricks.com/examples/ShapesOfCSS/ et les appliquer respectivement sur la première et dernière date, mais je ne vois pas comment réaliser ce dernier point avec ton API.

Je pensais aussi mettre une tooltip avec un texte par défaut sur les dates non réservées, mais là encore l'ouverture du code et les exemple JS sont si claires que je vois où ajouter cela (mouseOnDay).
Justement sur "http://www.bootstrap-year-calendar.com/#Examples/Full example" dans mouseOnDay, pourquoi une boucle sur les évènements ?

[Paul-DS]

Pour le premier point, j'avais mis en place ce type de style, que j'ai abandonné par la suite, à cause du rendu moyen quand les éléments sont sur plusieurs lignes. Je pourrais rajouter juste une option pour au moins identifier les cellules de début et de fin d’événement. Après il suffit d'ajouter un style css sur les cellules en questions. Un exemple ici (j'ai modifié rapidement le code du plugin pour identifier les cellules: ".date-start" et ".date-end").

Pour le 2ème point, j'ai utilisé une boucle car plusieurs événements peuvent être présent sur une même journée (par exemple le 17 novembre).

[madsenfr]

C'est ça pour le traitement CSS différent de la première et dernière date, mais le rendu serait plus du genre http://www.sajt-trgovina.com/booking_calendar/ afin d'indiquer une réservation de nuitée et donc une demi-journée.

J'ai réussi à faire ça, mais je n'arrive pas l'intégrer proprement à ton code sans tout casser.
Une option Half-day pour le style background serait bienvenue ;-)

<table> <tr><td> <div style="width: 0; height: 0; border-bottom: 25px solid red; border-left: 25px solid transparent;"> <div style="left: -15px; position: relative;">1 </div> </div></td><td> <div style="background-color: red; width: 25px; height: 25px; padding-left: 10px"> <div >2 </div> </div></td><td> <div style="width: 0; height: 0; border-top: 25px solid red; border-right: 25px solid transparent;"> <div style="top: -25px; right: -10px; position: relative;">3 </div> </div></td> </tr> </table>

[Paul-DS]

J'ai fait quelques modifications qui devraient te permettre de mettre en place ce que tu veux :

• J'ai ajouté les classes ".day-start" et ".day-end" sur le premiers et dernier jours d'un évènement.
• J'ai rajouté la gestion des propriétés "startHalfDay" et "endHalfDay" du datasource, pour un affichage comme sur le site que tu m'a indiqué (voir exemple).

Si j'ai bien compris tu souhaite afficher une case semi colorée pour chaque début et fin de réservation, peu importe la réservation ?

Si c'est le cas, tu peux désormais :

• Appliquer un style CSS sur les élement de classe "day-start" et "day-end". En fonction de la solution CSS choisie ce sera plus ou moins simple, car en CSS tu ne peux pas appliquer un style avec la couleur de l’événement (à part si tous les événements sont de la même couleur, comme sur le site exemple).
• Définir les propriétés "startHalfDay" et "endHalfDay" de ton datasource tout le temps à "true"
• Modifier le code du plugin (il suffit de supprimer les lignes 379, 382 à 385 ainsi que 391, 394 à 397 pour appliquer le style "semi-coloré" à chaque début/fin d'événement).

N'hésite pas si ce n'est pas clair ou si tu as d'autres questions.

[madsenfr]

Merci, beau boulot, c'est propre.
Mais quand j'ajoute une période contiguë dans le dataSource, la demi journée de la période précédente disparaît :
{
startDate: new Date(2016, 2, 11),
endDate: new Date(2016, 2, 15),
startHalfDay: true,
endHalfDay: true
},
Si c'est plus simple, pour mon style de besoin, les différentes périodes n'ont pas forcément à être de couleurs différentes, même si ça reste cool ;-)

Sinon, afin de simplifier les déclaration du dataSource ou d'éviter de modifier le code à chaque fois que je mettrais à jour ton plugin, serait-il possible de mettre un flag global comme pour "displayWeekNumber: true", mais "displayHalfDay: true;" ?
Sinon ce qui est déjà fait est vraiment bien et de toute façon c'est du PHP qui va me créer le dataSource, mais c'est juste pour alléger la page.

Dernier détail, c'est perturbant les mois numérités de 0 à 11, ça pourrait être bien de mettre les n° des mois habituels et que ça soit le code qui fasse -1.

[Paul-DS]

J'ai corrigé le bug d'affichage sur les périodes contiguës.

J'ai ajouté une option "alwaysHalfDay" qui permet d'afficher les premiers/derniers jours d'une période en style "demi-journée".

Pour ton dernier soucis, la numérotation des mois est définit par l'objet javascript "Date" (voir ici), et n'est donc pas dépendante de mon plugin.

[madsenfr]

C'est nickel, y'a rien à dire, si ce n'est merci.

Ok pour les dates dans le script.
Mais je me suis rendu compte que les dates dans le datepicker sont au format mm/jj/aaaa.
Comment les mettre au format jj/mm/aaaa, est-ce qu'elles s'adaptent à la langue (car je constate ça sur ton exemple anglais en ligne) ?

Maintenant que j'ai un calendrier digne de ce nom, je vais commencer mon site, je repasserais montrer l'intégration.
Mais je rencontre quelques difficultés pour créer ma propre page avec un exemple full. Il semble qu'il me manque pas mal de prérequis. Serait-il possible d'avoir un template avec tout ce qui est nécessaire dans la section (CDN css et js), SVP ?

[Paul-DS]

Le datepicker que j'utilise est un composant externe (disponible ici). Il propose une option "format" ainsi qu'une option "language".

Voici l'exemple complet : full-example.zip
Il contient :

• Le fichier jQuery (js)
• Les fichiers bootstrap (js + css + fonts)
• Les fichiers bootstrap-datepicker (js + css)
• Les fichiers bootstrap-year-calendar (js + css + fichier de langue fr)

Si tu veux utiliser uniquement le calendrier, pas de datepicker, tu peux enlever ce qui concerne bootstrap-datepicker.

N'hésite pas à repasser pour montrer le résultat !

Bon dev !

[josefequalizer]

hi broth can you give me php script to save events in the database
thanks broth