--- 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>