j-MonthlyCalendar

jComponent 20 · jcomponent@20 component Exemplo carregado com jComponent 20

Suporte apenas a visão mensal

Configuração:

parent {String} um seletor jQuery para obter altura fixa (default auto)
firstday {Number} primeiro dia no calendário 0 = Sunday, padrão 0
noborder {Boolean} desabilita a fronteira (default: false)
selectable {Boolean} permite a seleção de dias (default: true)
morebutton {String} um modelo Tangular para o botão More (default: +{{ count }} more)
select {String} um caminho para Function(item_event, el, e), tenha cuidado: item_event pode ser null
create {String} um caminho para Function({ beg: Date, end: Date }, beg_element, end_element)
dblclick {String} um caminho para Function(item_event, el, e)
dblclickdate {String} um caminho para Function(date, el, e)
contextmenu {String} um caminho para Function(item_event, el, e)
rebind {String} um caminho para Function({ dates: Array, date: Date }) é executado quando o calendário é ligado
Subtratos de topoffset {Boolean} offset.top a partir de height (default: false)
Subtratos de topposition {Boolean} position.top a partir de height (default: false)
Margem superior/baixo de margin {Number} (default: 0)
marginxs {Number} A margem superior/bottom para xs tela width
marginsm {Number} A margem superior/bottom para sm tela width
marginmd {Number} A margem superior/bottom para md tela width
marginlg {Number} A margem superior/bottom para lg tela width
NEW: keepselected {Boolean} mantém dias selecionados (default: false)
NEW: hover {String} um caminho para Function({ beg: Date, end: Date }, beg_element, end_element) (também como create, mas é chamado em métodos de component.hover() e component.unhover())
NEW: scalewidth {Boolean} escala a altura de acordo com a largura do elemento-mãe

Métodos:

component.addevents(events) adiciona eventos
- events significa Array de objeto abaixo:
- [{ id: String, beg: Date, end: Date, html: String, icon: String, color: String, background: Boolean }]
component.addevent(event) adiciona um evento
- Não pode ser combinado com o método addevents
- Pode ser executado várias vezes
- Objeto do evento: { id: String, html: String, icon: String, color: String, background: Boolean }
NEW: component.addbadge(date, [color]) adiciona um sinal
Título: component.hover(beg, end)
Título: component.unhover()
component.clear() remove todos os eventos e sinais

Localização:

Os nomes de mês e dia são tirados das propriedades MONTHS e DAYS definidas na biblioteca jComponent.

Use-o com <ui-component name="monthlycalendar">Quando o componente ainda não está carregado, jComponent Descarrega-o no primeiro uso do endereço DEF.fallback (a partir do Componentator CDN por padrão). autor: Peter Širka. fonte: o Componentator Reserva de componentes, licença 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>