ASP.NET MVC Planificateur de open-source?

Notre équipe a eu un MVC 5 projet récemment à ce besoin. Le projet a prévu la possibilité d'afficher un calendrier des événements à partir d'une base de données ainsi que d'ajouter et de supprimer des éléments de calendrier. Nous avons regardé DayPilot Lite & Dhtmlx du JavaScript version 4.1 open source versions.

Ce que nous avons trouvé

À la fois JavaScript versions et .Net WebForms et/ou MVC versions intégrées cependant, pour notre projet, nous avons souhaité le JavaScript versions sur le MVC intégré les versions que nous avons estimé qu'il était plus propre et de faire plus avec notre modèle de développement (Nous n'avons pas tendance à utiliser la 3ème partie intégrée de contrôle). JavaScript a été la seule version gratuite offerte par Dhtmlx tout DayPilot offre la lite version open source pour les WebForms et MVC.

Les deux ont beau tutoriels disponibles sur leur site et sur divers sites comme le projet de code.

Ce que nous avons choisi

Nous avons utilisé dhtmlx JavaScript Calendrier des Événements /Ajax Planificateur de dans un ASP.Net MVC 5 app comme il l'avait un peu plus de fonctionnalités dans sa version open source que nous avons souhaité. À savoir le codage de la couleur de l'option était prêt à aller hors de la boîte et nous avons trouvé l'API très souple, exposé des événements et des options de personnalisation très puissant. Nous avons été très heureux avec elle et a trouvé qu'il était facile à utiliser leur site de documentation et des échantillons site pour comprendre tout ce que nous devions faire. Nous n'avons pas d'utiliser leurs connecteur de données que nous avons trouvé directement les appels AJAX travaillé assez facile pour notre scénario.

Prise en main avec dhtmlx

Voici quelques articles sur le projet de code que nous avons utilisé pour nous inciter à poursuivre avec dhtmlx.

http://www.codeproject.com/Articles/148500/Event-Calendar-for-an-ASP-NET-MVC-Application

http://www.codeproject.com/Articles/249921/How-to-Build-a-Room-Booking-Calendar-with-dhtmlxSc

Dans le cas où les liens arrêt de travail de l'auteur est Stas Wolski pour eux deux.
Les deux exemples sont vieux, mais toujours aussi efficace. Enfin, nous avons utilisé leurs démonstration en ligne (peut être téléchargé) et la documentation en ligne site.

Partage du savoir

L'un de nos plus grands tours pour le calendrier a été le format de la date correspondant (ou de non-concordance dans notre cas initial).

Nous avons utilisé le format de scheduler.config.xml_date = "%m/%d/%Y %H:%i".

Pour les dates à venir de notre MVC Modèle de Vue (VM) nous avons fait en sorte de les convertir en un format de chaîne de date courte (@Model.StartDate.ToString("d")) si c'est une date dans la machine virtuelle.

Si la machine virtuelle a adopté une date comme une chaîne de caractères puis nous nous sommes assurés que le contrôleur utilise le format suivant l'exemple (item.StartDate.ToString("MM/dd/yyyy HH:mm:ss")).

Un potentiel utile de l'API, nous avons utilisé qui est peut-être juste de l'utiliser.

Réagir à l'agenda clics de prendre un coup d'oeil à scheduler.attachEvent

De changer les Heures de l'Échelle look de prendre un coup d'oeil à scheduler.templates.hour_scale

Besoin pour personnaliser l'affichage de différents types d'événements - jetez un oeil à scheduler.renderEvent et scheduler.templates.event_class

Cacher/Ignorer les week-ends dans le calendrier - jetez un oeil à scheduler.ignore_week

Besoin d'avoir une boîte de dialogue de confirmation pour un calendrier de l'action de prendre un coup d'oeil à scheduler._dhtmlx_confirm

Minifying Question

Nous avons trouvé un chat avec la JS version et MVC en particulier que nous n'avons pas à résoudre. Si vous le bundle et minifier le dhtmlx scripts le planificateur de pauses que l'objet de planificateur est renommé et devient indéfini. Nous avons simplement le programme d'installation des scripts pour bundle mais de ne pas rapetisser en utilisant Bundle au lieu de ScriptBundle.

    bundles.Add(new Bundle("~/bundles/dhtmlx/calendar").Include(
        "~/Scripts/dhtmlx/dhtmlxscheduler.js",
        "~/Scripts/dhtmlx/ext/dhtmlxscheduler_limit.js",
        "~/Scripts/dhtmlx/ext/dhtmlxscheduler_minical.js",
        "~/Scripts/dhtmlx/ext/dhtmlxscheduler_readonly.js"));

Je suis sûr qu'il y est un moyen de résoudre cela, mais nous n'étions pas trop inquiet à ce sujet dans notre cas, car cette partie de l'application a été ne va pas être obtenir de grandes quantités de trafic....

OriginalL'auteur klabranche