Biblioteca de JavaScript de calendario con todas las funciones-TUI. Calendar

Vista prévia

Descripción

TUI. Calendar es una biblioteca de calendario potente y con todas las funciones que se utiliza para Mostrar eventos personalizados, programaciones, tareas en vistas diarias, semanales y mensuales.

Instalación

# NPM
$ npm install tui-calendar --save

¿Cómo funciona?

Incluya los archivos JavaScript y CSS incluidos en la página.

<link rel="stylesheet" href="dist/tui-calendar.css">
<script src="dist/tui-calendar.js"></script>

Cree un contenedor donde desee renderizar el TUI Calendar.

<div id="calendar"></div>

Cree un nuevo calendario Tui como estos:

var Calendar = tui.Calendar;

var calendar = new Calendar('#calendar', {


// options here
});

Opciones posibles para personalizar el calendario.

var calendar = new Calendar('#calendar', {



// 'day', 'week', 'month'


defaultView: 'week',



// shows the milestone and task in weekly, daily view


taskView: true,



// shows the all day and time grid in weekly, daily view


scheduleView: true,



// template options


template: {



milestone: function(schedule) {




return '<span style="color:red;"><i class="fa fa-flag"></i> ' + schedule.title + '</span>';



},



milestoneTitle: function() {




return 'Milestone';



},



task: function(schedule) {




return '&nbsp;&nbsp;#' + schedule.title;



},



taskTitle: function() {




return '<label><input type="checkbox" />Task</label>';



},



allday: function(schedule) {




return schedule.title + ' <i class="fa fa-refresh"></i>';



},



alldayTitle: function() {




return 'All Day';



},



time: function(schedule) {




return schedule.title + ' <i class="fa fa-refresh"></i>' + schedule.start;



}


},


week: {



daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],



startDayOfWeek: 0,



narrowWeekend: true


},


month: {



daynames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],



startDayOfWeek: 0,



narrowWeekend: true


},



// list of Calendars that can be used to add new schedule


calendars: [],



// whether use default creation popup or not


useCreationPopup: false,



// whether use default detail popup or not


useDetailPopup: false



});

Registro de cambios

v1.11.0 (04/06/2019)

• Agregada compatibilidad con la plantilla de tiempo actual en la vista semanal y diaria
• Cambie el tipo de exportación ' TUI-Calendar ' del archivo de definición de Typescript a la exportación predeterminada

v1.10.1 (03/07/2019)

• Arreglado: Bug DST TimeZone

v1.10.0 (01/24/2019)

• feat: la creación emergente se abre en la opción de solo doble clic si se establece ' disableClick '

v1.9.0 (12/18/2018)

• feat: mostrar un recurrenceRule y el texto del cuerpo

v1.8.1 (12/12/2018)

• Feat: agregue el archivo de declaración para Typescript

v1.8.0 (11/06/2018)

• arreglo: el estado siempre está ocupado

v1.7.0 (11/06/2018)

• arreglo: error getDateRangeEnd () en la vista de mes cuando Option. month. isAlways6Week no está definido.
• feat: Agregue la devolución de llamada ' clickMore ' en la vista mensual
• arreglo: arrastrando un horario, haz mal el tiempo en 24 o'click

v1.6.0 (07/25/2018)

• Bugfix

v1.5.0 (07/18/2018)

• arreglo: getElement devuelve null en la vista de mes en caso de programaciones ocultas
• feat: soporta la opción isReadOnly de Calendar