Actualización a fullcalendar v5. Maravillosa herramienta!
En la vista de lista, me gustaría que la columna izquierda muestre 'Viernes 2', o Sábado 3 ... etc.
Yo he puesto
listDayFormat: { weekday: 'long', day: 'numeric' }, y pensé que esto invertiría el orden predeterminado: "2 viernes" a viernes 2 (con el que podría vivir en su mayoría, pero no cambia el orden.
He trabajado en un truco, que funciona para mis necesidades específicas (actuales), pero sigue siendo un truco. En fc-list.min.js declaro una función ordinal en la parte superior
function swap(thus) { x = thus.split(' ')[0]; // day number y = thus.split(' ')[1]; // day name var s=["th","st","nd","rd"], v=x%100; return y+' '+x+(s[(v-20)%10]||s[v]||s[0]); }Luego, en el min.js llamo a esta función.
<td class="'+(r.getClass("tableListHeading")||r.getClass("widgetHeader"))+'" colspan="3">' +(i?t.buildGotoAnchorHtml(o,s,e,{class:"fc-list-heading-main"}, //t.htmlEscape(s.format(e,i)) // original swap(s.format(e,i)) // function swap() set at page top ):"") +(a?t.buildGotoAnchorHtml(o,s,e,{class:"fc-list-heading-alt"},t.htmlEscape(s.format(e,a))):"")+"</td>")}, Tengo una solución, pero no una solución.
¿Puede alguien ponerme en un camino más recto? Gracias.
El dayHeaderContent establece el contenido del encabezado del día en un valor personalizado. https://fullcalendar.io/docs/day-header-render-ganchos
Ejemplo: https://codepen.io/stevewillson/pen/jOwgGqm
El siguiente código se puede usar dentro de una instancia de FullCalendar para establecer el contenido del encabezado del día en "Viernes 2", "Sábado 3"...
dayHeaderContent: function(info) { let s = ''; // get the day of the month (number) const dayOfMonth = info.date.getDate(); // set the ordinal value of the date in s if (dayOfMonth > 3 && dayOfMonth < 21) s = 'th'; switch (dayOfMonth % 10) { case 1: s = 'st'; break; case 2: s = 'nd'; break; case 3: s = 'rd'; break; default: s = 'th'; } const locale = 'en-US'; // get the name of the day (Friday, Saturday ...) const dayName = info.date.toLocaleDateString(locale, { weekday: 'long' }); return dayName + ' ' + dayOfMonth + s; },Mi pregunta original estaba relacionada con la configuración de la información del encabezado de la lista. - específicamente:
listDayFormat: { weekday: 'long', day: 'numeric' }, listDayAltFormat: { year:'numeric', month: 'short', day: 'numeric' }, Podría publicar esto como otra pregunta, pero quería aclarar mis resultados y trabajar con la respuesta de Steve y agregar un comentario es demasiado limitado. Steve me indicó dayHeaderContent, cuyos documentos dicen "El contenido generado se inserta dentro del contenedor más interno de la celda del encabezado". - lo cual es correcto pero solo permite un único elemento centrado. Esperaba reproducir el estilo izquierdo de listDayFormat y el derecho de listDayAltFormat. La única forma que se me ocurrió fue agregar html. Pero no está permitido. Experimenté con variedades de >> eventContent: { html: ' some html ' } << pero no hice ningún progreso.
Esto es para lo que trabajé la respuesta de Steve ...
dayHeaderContent: function(info) { if (info.view.type == 'listMonth') { x = info.date.getDate(); // #dayOfMonth var s=["th","st","nd","rd"], v=x%100; // ordinal var ordinal = x+(s[(v-20)%10]||s[v]||s[0]); // thought this would help with left/right setup // just a bit of fun var dayNames = ["Sun Day","Moon Day","Tiw's Day","Woden's Day","Thor's Day","Frige's Day","Saturn Day",]; return dayNames[info.date.getDay()]+' '+ordinal; // getDay()=#dayOfWeek } },y probé numerosas permutaciones de retorno, pero me siento en un callejón sin salida con respecto a mi objetivo original. Es lo suficientemente bueno por ahora.
Cualquier adición a la Q original sería bienvenida. Gracias.