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ón
https://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");
                    });