[milou2002]

Finalement, j'ai d'utilisé une méthode purement LISE. N'ayant pas l'habitude de ce module, je n'y avais pas pensé directement. Désolé du dérangement

Ainsi, j'ai créé deux listes LISE : une liste de produits (avec les champs descriptifs souhaités) et une liste des réservation (avec le champs date et la liste des produits). Par après, il suffit d'afficher la liste des produits en faisant appel aux dates de réservation propres à chaque produit.

Voici le détail des étapes effectuées :

Installation du module LISE
Création des deux instances LISE (LISEProduits et LISEReservations)
Définition des champs de LISEProduits
- Catégories | type Catégories
- Description | type Zone de texte
- Photo | type Envoi de fichier
- ...
Définition des champs de LISEReservations
- Produit| type Elément d'une instance LISE :p Important
- Instance : LISEProduits
- Identifiant : title
- Sub Type : Menu déroulant
- Date | type Sélectionner une date + heure
- Format Type : Date Format
Création du gabarit de sommaire Calendrier dans LISEReservations
Le gabarit de sommaire Calendrier de LISEReservations reprend les liens vers les scripts (JS) nécessaires pour construire le calendrier et construit la variable eventArray reprenant les dates de réservation seulement du produit demandé.

Code :

[== Indéfini ==]
<div class="cal1"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="uploads/calendar/clndr.js"></script>

<script>
var calendars = {};
$(document).ready( function() {
moment.locale('fr');
var eventArray = [

{foreach from=$items item=i}
{if $i->fielddefs.produit.value == $item->title}
{literal}{{/literal}
  date: '{$i->fielddefs.date.value|date_format:"%Y-%m-%d"}'
{literal}},{/literal}
{/if}
{/foreach}

];
calendars.clndr1 = $('.cal1').clndr({
        events: eventArray,
        clickEvents: {
            click: function (target) {
                console.log('Cal-1 clicked: ', target);
            },
            today: function () {
                console.log('Cal-1 today');
            },
            nextMonth: function () {
                console.log('Cal-1 next month');
            },
            previousMonth: function () {
                console.log('Cal-1 previous month');
            },
            onMonthChange: function () {
                console.log('Cal-1 month changed');
            },
            nextYear: function () {
                console.log('Cal-1 next year');
            },
            previousYear: function () {
                console.log('Cal-1 previous year');
            },
            onYearChange: function () {
                console.log('Cal-1 year changed');
            },
            nextInterval: function () {
                console.log('Cal-1 next interval');
            },
            previousInterval: function () {
                console.log('Cal-1 previous interval');
            },
            onIntervalChange: function () {
                console.log('Cal-1 interval changed');
            }
        },
        multiDayEvents: {
            singleDay: 'date',
            endDate: 'endDate',
            startDate: 'startDate'
        },
        showAdjacentMonths: true,
        adjacentDaysChangeMonth: false
    });

    // Bind all clndrs to the left and right arrow keys
    $(document).keydown( function(e) {
        // Left arrow
        if (e.keyCode == 37) {
            calendars.clndr1.back();
        }

        // Right arrow
        if (e.keyCode == 39) {
            calendars.clndr1.forward();
        }
    });
});
</script>

Ajout du calendrier à la fin du gabarit de détail Liste dans LISEProduits

Code :

[== Indéfini ==]
...
        {/foreach}
    </div>
    {/if}
        
        <div id="calendrier">{LISEReservations template_summary="calendrier"}</div>

    <div id="retour"><a href="{$return_url}" class="return-link">Retour</a>{* or use {$return_link} to create link tag *}</div>
</div>
<!-- item //-->

Insérer la liste de produits dans une page de contenu

Code :

[== Indéfini ==]
{LISEProduits action='category'}

L'exemple est basé sur le calendrier jquery CLNDR.js, d'autres calendriers peuvent évidemment être utilisés.