Calendario citas
El calendario citas nos proporciona un calendario personalizable, en el cual podremos identificar la disponibilidad que tienen los días para citas. Los cuales tienen que ser definidos por medio de un json
Modo de uso
Para el funcionamiento correcto de este plugin se deberán agregar las siguientes rutas de script después del script de gobmx.js:
Ambiente de producciónhttps://framework-gb.cdn.gob.mx/assets/scripts/vendor/moment.min.js
https://framework-gb.cdn.gob.mx/assets/scripts/vendor/fullcalendar.min.js
https://framework-gb.cdn.gob.mx/assets/scripts/vendor/lang/es.js
https://framework-gb.cdn.gob.mx/assets/scripts/calendario-citas.js
JSON de ejemplo para definir la disponibilidad de los días: JSON
Es un arreglo de json donde cada json tiene tres atributos:
fecha es en formato (YYYY-MM-DD)
color: Toma una de las siguientes variables:
- (#FFF6F4) Sin disponiblidad
- (#EEF0FF) Sin disponiblidad
border: Toma una de las siguientes variables:
- (#D0021B) Sin disponiblidad
- (#4D92DF) Sin disponiblidad
Importante
En caso de hacer uso de este plugin se deberá incluir de manera manual dentro del documento el script de jQuery 1.12.4
o mayor para que exista un correcto funcionamiento del mismo.
HTML:
...
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-8">
<div id="foo"/>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4 col-md-4">
<img src="https://framework-gb.cdn.gob.mx/assets/images/semaforo-calendario.png"></img>
</div>
</div>
</div>
...
Javascript:
$(window).load(function () {
calendarOperations.init("foo", "https://framework-gb.cdn.gob.mx/data/dias.json");
});