Forum CMS Made Simple FR
[Résolu] LISE et Calendrier des disponibilités - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : [Résolu] LISE et Calendrier des disponibilités (/thread-3809.html)


[Résolu] LISE et Calendrier des disponibilités - milou2002 - 01/04/2016

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 2.1.2
#~ Url du site :
#~ Hébergeur / Soft : OVH Perso
#~ Informations Système :
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour,

Avant de me lancer dans la construction d'un nouveau site, je fais un rapide état des lieux des modules à adapter.

Je souhaite faire une liste de produits avec un calendrier des disponibilités. Sur base des forums, je pensais partir sur ListIt2 (devenu LISE) et JSAvailability (plus mis à jour).

- Que pensez-vous de cette solution ?
- Pensez-vous possible d'adapter un multidate picker (backend) et un multidate calendar (frontend), comme pouvais le faire JSAvailability, sur LISE ?
- Avez-vous une meilleure piste à suivre ?

D'avance merci !

[Résolu] LISE et Calendrier des disponibilités - milou2002 - 03/04/2016

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 Big Grin

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. Cool

[Résolu] LISE et Calendrier des disponibilités - Jean le Chauve - 03/04/2016

Merci beaucoup pour ta démonstration Smile
N'hésite pas à nous faire découvrir tes autres solutions maison.

Tu peux utiliser une manière plus rapide d'écrire des accolades échappées :
{literal}{{/literal} -> {ldelim}
{literal}}{/literal} -> {rdelim}

[Résolu] LISE et Calendrier des disponibilités - milou2002 - 03/04/2016

Merci bien. J'applique cette correction. Wink