fullcalendar

=fullcalendar=

code format="html4strict"   code code format="html4strict" code code format="javascript" 
 * Es un calendario jQuery
 * @http://arshaw.com/fullcalendar/
 * descargar el fullcalendar-1.5.2.zip y tomar el css y el js
 * para obtener un calendario como el que se muestra
 * El calendario se pondrá en el siguiente DIV
 * El script es el siguiente

$(document).ready(function {

//calendar $('#calendar').fullCalendar({            firstDay: 1,             monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],             monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],             dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles',             'Jueves', 'Viernes', 'Sábado'],             dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],             buttonText:              {                  prev:     ' ◄ ',                  next:     ' ► ',                  prevYear: ' &lt;&lt; ',                  nextYear: ' &gt;&gt; ',                  today:    'hoy',                  month:    'mes',                  week:     'semana',                  day:      'día'              },             header: {                 left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay' },            editable: false, events: [ { title: 'salida de 1 vall d\'aran dia al Pirineo', start: new Date(2011, 11, 04), end: new Date(                  2011, 11, 04), url: '/es/actividades/1-día/pirineos/salida-de-1-vall-d\'aran-dia-al-pirineo.aspx' }, { title: 'Senderismo facil por el Cabo de Gata', start: new Date(2011, 11, 06), end: new Date(                   2011, 11, 11), url: '/es/actividades/vacaciones/españa/senderismo-facil-por-el-cabo-de-gata.aspx' }, { title: 'Travesia Portbou - Cotlliure', start: new Date(2011, 11, 10), end: new Date(                   2011, 11, 11), url: '/es/actividades/fin-de-semana/senderos-del-mediterráneo/travesia-portbou-cotlliure.aspx' }, { title: 'MARRUECOS NOMADA Y SENDERISMO FIN DE AÑO', start: new Date(2011, 11, 26), end: new Date(                   2012, 0, 06), url: '/es/actividades/vacaciones/marruecos/marruecos-nomada-y-senderismo-fin-de-año.aspx' }, { title: 'Fin de Año en el desierto, Oasis del Sahara y Alto Atlas', start: new Date(2011, 11, 28), end: new Date( 2012, 0, 03), url: '/es/actividades/vacaciones/marruecos/fin-de-año-en-el-desierto,-oasis-del-sahara-y-alto-atlas.aspx' }            ]         });

});

code

Usándolo en umbraco, elcódigo XSLT es el siguiente code format="xml" 







$(document).ready(function {

//calendar $('#calendar').fullCalendar({            firstDay: 1,             monthNames: ,             monthNamesShort: ,             dayNames: ,             dayNamesShort: ,             buttonText:              {                  prev:     ' &#9668; ',                  next:     ' &#9658; ',                  prevYear: ' &lt;&lt; ',                  nextYear: ' &gt;&gt; ',                  today:    '',                  month:    '', week:    '', day:     '' },            header: { left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay' },            editable: false, events: [  <xsl:sort select="actividadFecha" order="ascending" /> <xsl:variable name="apos">'</xsl:variable> <xsl:variable name="producto" select="./.."/> <xsl:variable name="fechaInicio" select="umbraco.library:FormatDateTime(actividadFecha,'dd/MMM/yyyy')" /> <xsl:variable name="fechaId" select="umbraco.library:FormatDateTime(actividadFecha,'dd')" /> <xsl:variable name="fechaIm" select="umbraco.library:FormatDateTime(actividadFecha,'MM')-1" /> <xsl:variable name="fechaIy" select="umbraco.library:FormatDateTime(actividadFecha,'yyyy')" /> <xsl:variable name="dias" select="$producto/diasDeViaje"/> <xsl:variable name="fechaFin" select="umbraco.library:DateAdd(umbraco.library:DateAdd(actividadFecha, 'd', $dias),'d',-1)" /> <xsl:variable name="fechaFd" select="umbraco.library:FormatDateTime($fechaFin,'dd')" /> <xsl:variable name="fechaFm" select="umbraco.library:FormatDateTime($fechaFin,'MM')-1" /> <xsl:variable name="fechaFy" select="umbraco.library:FormatDateTime($fechaFin,'yyyy')" /> <xsl:variable name="url" select="umbraco.library:Replace(umbraco.library:NiceUrl($producto/@id),$apos,concat('\',$apos))" />

<xsl:variable name="nombre" select="umbraco.library:Replace($producto/@nodeName,$apos,concat('\',$apos))" />

<xsl:if test="not(position=1)"> <xsl:text>, </xsl:text> </xsl:if> <xsl:text>{ title: '</xsl:text> <xsl:value-of select="$nombre" /> <xsl:text>', start: new Date(</xsl:text>                  <xsl:value-of select="$fechaIy" />                   <xsl:text>, </xsl:text>                   <xsl:value-of select="$fechaIm" />                   <xsl:text>, </xsl:text>                   <xsl:value-of select="$fechaId" />                   <xsl:text>), end: new Date(                   </xsl:text>                   <xsl:value-of select="$fechaFy" />                   <xsl:text>, </xsl:text>                   <xsl:value-of select="$fechaFm" />                   <xsl:text>, </xsl:text>                   <xsl:value-of select="$fechaFd" />                   <xsl:text>), url: '</xsl:text> <xsl:value-of select="$url" /> <xsl:text>' }</xsl:text>

</xsl:for-each> ]        });

});

</xsl:template> code Observemos
 * las traducciones al castellano
 * indicamos el id del nodo de la carpeta de actividades, para que las vaya leyendo una a una
 * el cálculo de fechas
 * la necesidad de poner \' para el caso del apóstrofe simple en un texto que lo contenga, para evitar errores de javascript.
 * poner 'editable=false' para evitar que se pueda arrastar un texto a otra fecha.