---
id: d7pnmr5dy8j995l5sbpmijayp
title: MiniDocs: Calendarios
created: 26 July 2022 4:30:40.031296 pm
modified: 26 July 2022 4:30:40.031296 pm
creator: <unknown>
modifier: <unknown>
---

<div st-class="LeTextSnippet"
  st-data="OrderedDictionary{'id':'Xm67vx2hDQCQfNiIAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:31:48.539936 pm','modified':'26 July 2022 4:40:56.082426 pm','creator':'<unknown>','modifier':'<unknown>'}">
MiniDocs también permite exportar documentos con vistas interactivas HTML,
siempre y cuando los objetos en una narrativa de datos tengan métodos que permiten producir vistas.
Por ejemplo, es posible usar [EchartsPharo](https://code.tupale.co/mutabiT/EchartsPharo)
para producir una vista de un calendario interactivo, dado un conjunto de datos.
</div>

<div st-class="LeTextSnippet"
  st-data="OrderedDictionary{'id':'bzCP5B2hDQCQg0xUAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:40:59.04872 pm','modified':'26 July 2022 4:41:20.148041 pm','creator':'<unknown>','modifier':'<unknown>'}">
Empecemos por definir un conjunto de eventos:
</div>

<div st-class="LePharoSnippet"
  st-data="OrderedDictionary{'id':'NTIYxh2hDQCQfyBKAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:32:26.836369 pm','modified':'26 July 2022 4:43:42.246158 pm','creator':'<unknown>','modifier':'<unknown>'}">
~~~ Smalltalk
citasOftalmologia := EcEvent new
	name: 'Cita en Oftalmología';
	dates: #('2022-01-25' '2022-03-19');
	color: Color orange "asHexString";
	type: 'graph'
~~~
</div>

<div st-class="LePharoSnippet"
  st-data="OrderedDictionary{'id':'EwkO5h2hDQCQhXS9AFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:41:23.041501 pm','modified':'26 July 2022 4:43:11.646316 pm','creator':'<unknown>','modifier':'<unknown>'}">
~~~ Smalltalk
quejasSupersalud := EcEvent new
	name: 'Queja en Supersalud';
	dates: #('2022-02-16' '2022-03-26' '2022-06-21');
	color: Color green ;
	type: 'graph'
~~~
</div>

<div st-class="LeTextSnippet"
  st-data="OrderedDictionary{'id':'bLcz6B2hDQCQioViAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:42:00.944331 pm','modified':'26 July 2022 4:42:17.147409 pm','creator':'<unknown>','modifier':'<unknown>'}">
Ahora agreguemos los eventos a un calendario:
</div>

<div st-class="LePharoSnippet"
  st-data="OrderedDictionary{'id':'ujN/6R2hDQCQjFIuAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:42:20.7895 pm','modified':'26 July 2022 4:44:14.709865 pm','creator':'<unknown>','modifier':'<unknown>'}">
~~~ Smalltalk
calendario := EcCalendar new.
calendario events 
    add: citasOftalmologia;
	add: quejasSupersalud.
calendario
~~~
</div>

<div st-class="LeTextSnippet"
  st-data="OrderedDictionary{'id':'GbIS8h2hDQCQkK2MAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:44:45.962014 pm','modified':'26 July 2022 4:45:03.976602 pm','creator':'<unknown>','modifier':'<unknown>'}">
Y exportémoslo como una vista interactiva en HTML:
</div>

<div st-class="LePharoSnippet"
  st-data="OrderedDictionary{'id':'ySqw8x2hDQCQkolbAFQ03w==','parent':'d7pnmr5dy8j995l5sbpmijayp','created':'26 July 2022 4:45:11.770686 pm','modified':'26 July 2022 4:50:39.982218 pm','creator':'<unknown>','modifier':'<unknown>','tags':Set['output']}">
~~~ Smalltalk
calendario asHTMLElement
~~~
</div>

