j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Ejemplo cargado con jComponent 20

admite solo vista mensual

Configuración:

parent {String} un selector jQuery para obtener una altura fija (por defecto auto)
firstday {Number} primer día en el calendario 0 = Sunday, por defecto 0
noborder {Boolean} desactiva el borde (predeterminado: false)
selectable {Boolean} permite seleccionar días (predeterminado: true)
morebutton {String} una plantilla Tangular para botón Más (predeterminado: +{{ count }} more)
select {String} un camino a Function(item_event, el, e), cuidado: item_event puede ser null
create {String} un camino hacia Function({ beg: Date, end: Date }, beg_element, end_element)
dblclick {String} un camino hacia Function(item_event, el, e)
dblclickdate {String} un camino hacia Function(date, el, e)
contextmenu {String} un camino hacia Function(item_event, el, e)
rebind {String} se ejecuta una ruta a Function({ dates: Array, date: Date }) cuando se vuelve a vincular el calendario
topoffset {Boolean} resta offset.top de height (predeterminado: false)
topposition {Boolean} resta position.top de height (predeterminado: false)
margin {Number} margen superior/inferior juntos (predeterminado: 0)
marginxs {Number} margen superior/inferior juntos para el ancho de pantalla xs
marginsm {Number} margen superior/inferior juntos para el ancho de pantalla sm
marginmd {Number} margen superior/inferior juntos para el ancho de pantalla md
marginlg {Number} margen superior/inferior juntos para el ancho de pantalla lg
NUEVO: keepselected {Boolean} mantiene los días seleccionados (desplazados) (predeterminado: false)
NUEVO: hover {String} una ruta a Function({ beg: Date, end: Date }, beg_element, end_element) (igual que create, pero se llama mediante los métodos component.hover() y component.unhover())
NUEVO: scalewidth {Boolean} escala la altura según el ancho del elemento principal

Métodos:

component.addevents(events) agrega eventos
- events significa Matriz de objetos a continuación:
- [{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]
component.addevent(event) agrega un evento
- no se puede combinar con el método addevents
- se puede ejecutar varias veces
- objeto de evento: { id: String, html: String, icon: String, color: String, background: Boolean }
NUEVO: component.addbadge(date, [color]) agrega una insignia
NUEVO: component.hover(beg, end)
NUEVO: component.unhover()
component.clear() elimina todos los eventos e insignias.

Localización:

Los nombres de mes y día se toman de las propiedades MONTHS y DAYS definidas en la biblioteca jComponent.

Úselo con <ui-component name="monthlycalendar">. Cuando el componente aún no está cargado, jComponent lo descarga en el primer uso desde la dirección en DEF.fallback (el CDN Componentator de forma predeterminada). Autor: Peter Širka. Fuente: repositorio de componentes Componentator, licencia MIT.

example.html

<style>
	body{margin:0;padding:0;overflow:hidden;}
</style>

<ui-component name="monthlycalendar" path="common.date" config="parent:auto;noborder:1;firstday:1"></ui-component>

<script>
	var common = { date: NOW };

	(function() {
		var events = [];
		events.push({ id: 'a', beg: NOW.add('-10 days'), end: NOW.add('2 days'), html: 'Big event', color: 'orange' });
		events.push({ id: 'b', beg: NOW, html: 'Current', icon: 'ti ti-car', color: 'blue' });
		SETTER(true, 'monthlycalendar/addevents', events);
	})();

</script>