Ajout du composant FullCalendar dans une application Asp.net MVC

fullcalendar

Le composant Jquery FullCalendar fait parti des meilleurs composants gratuits qui représentent un agenda. J'ai eu l'occasion de l’utiliser dans l'un de mes projets, et j'ai voulu partager avec vous la manière dont je l'ai intégré dans une application asp.net MVC.

  • Etatpe 1 : La première chose à faire et de télécharger FullCalendar via le lien suivant: lien, ensuite il faut inclure le fichier téléchargé dans votre projet, sous le dossier script.
  • Etape 2 :  Il faut ensuite ajouter une vue cshtml avec la syntax razor :
@using Newtonsoft.Json
@model  IList<CovaccMCI.Models.Personnel.EtatViewModel>
@section Head
{
    <!--jQuery dependencies--> 
 <link href='~/Scripts/fullcalender/fullcalendar.css' rel='stylesheet' />
<link href='~/Scripts/fullcalender/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='~/Scripts/fullcalender/lib/moment.min.js'></script>
<script src='~/Scripts/fullcalender/fullcalendar.min.js'></script>
 <link href="~/Content/mci.css" rel="stylesheet" type="text/css" />
}

@Scripts.Render("~/bundles/js-planingPersonnel")

<div class="container-fluid" >
    <div id='planing' data-model='@JsonConvert.SerializeObject(Model)'
         data-url-list-personnel="@(Url.Action("Index", "Personnel"))">       
        <div class="row">
            <span class="text-center"><h1>@Resources.Resource.Personnelcalendrie</h1> </span><br /><br />
        </div>
        <div id='calendar' class="row"></div>        
        <div class="row">
            <div class="col-md-10"></div>
            <div class="col-md-2">
                <input id="CalendarPlaning" type="button" class="buttonFolder" value="@Resources.Resource.Quitter" />
            </div>
        </div>
  </div>
</div>
  • Etape 3 : Création du script javascript que je nomme js-planingPersonnel, il faut également le bundler dans le bundelconfig:
$(document).ready(function () {
    $("#CalendarPlaning").click(function () {

        location.href = $("#planing").data("url-list-personnel");

    });

    /* initialize the external events
         -----------------------------------------------------------------*/
    var event = $("#planing").data("model");
    event.forEach(function (e) {
        e.start = moment(e.start, "DD/MM/YYYY hh:mm").format("YYYY-MM-DD hh:mm");
        e.end = moment(e.end, "DD/MM/YYYY hh:mm").format("YYYY-MM-DD hh:mm");
        e.end= moment(e.end).add(1, 'days'); // pour afficher les date de fin inclusive.
    });
    /* initialize the calendar
    -----------------------------------------------------------------*/
    var cal = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        editable: true,
        droppable: true,         
        events:event
    });

   });

Dans ce script , je récupère le planning à partir du modèle , puis je le passe au composant JQuery FullCalendar qui s'occupe de l'afficher dans son agenda convenablement.

Plusieurs paramètres à renseigner lors de son appel, comme par exemple :

  • Header : qui sert à afficher la barre d'outils de l'agenda;
  • Editable : rendre le composant modifiable;
  • Droppable : offre la possibilité de supprimer des événements;
  • Events : représente le data du calendar, il accepte une liste d'objets de type EtatViewModel, le code de ce type est présenté dans la section suivante.
  • Etape 4 : Création du view model et de la méthode contrôleur

 

public ActionResult Planing(int personnelId)
  {
     var vm = personnelService.GetAllEtatPersonnels(personnelId);            
     return View(vm);
  }
namespace CovaccMCI.Models.Personnel
{
    public class EtatViewModel
    {
        public int IdPersonnel { get; set; }
        public string title { get; set; }
        public string start { get; set; }
        public string end { get; set; }
        public string allDay { get; set; }       
    }  
}

Le champ title sera affiché dans l'agenda d'une manière répétitive pendant toute la durée entre la date start et la date end.

  • Etape 5 : La méthode de la classe service
public IList<EtatViewModel> GetAllEtatPersonnels(int personnelId)
 {
   var result = dbPersonnel.GetAllEtatOfPersonnel(personnelId)
                .Select(t => new EtatViewModel
        {
          IdPersonnel = int.Parse(t["Personnel_id"].ToString()),
          start = t["date_debut"].ToString(),
          end = t["date_fin"].ToString(),
          title = t["libelle"].ToString()               
        });
    return result.ToList();
 }

Voici ce que le navigateur doit afficher :planing_calendar_img

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.