una - validacion de formularios con javascript ejemplos

Calendario completo muestra los eventos como puntos

Question

Estoy tratando de modificar el diseño de un calendario usando el calendario completo. Lo que quiero lograr es que los eventos visibles que caben en el calendario se muestren como están y los eventos ocultos (eventos que se colapsaron en "+2 más") como puntos. Aquí está cómo se ve hasta ahora:

var dayArray = [];
$(function() {
var todayDate = moment().startOf(''day'');
var YM = todayDate.format(''YYYY-MM'');
var YESTERDAY = todayDate.clone().subtract(1, ''day'').format(''YYYY-MM-DD'');
var TODAY = todayDate.format(''YYYY-MM-DD'');
var TOMORROW = todayDate.clone().add(1, ''day'').format(''YYYY-MM-DD'');
var NEXTMONTH = todayDate.clone().add(1, ''month'').format(''YYYY-MM'');
$(''#calendar'').fullCalendar({
header: {
left: ''prev,next today'',
center: ''title'',
right: ''month,agendaWeek,agendaDay,listWeek''
},
editable: true,
eventLimit: true, // allow "more" link when too many events
navLinks: true,
timeFormat: ''HH:mm'',
slotLabelFormat: ''HH:mm'',
views: {
basic: {
// options apply to basicWeek and basicDay views
},
agenda: {
// options apply to agendaWeek and agendaDay views
},
week: {
columnHeaderFormat: ''ddd D'',
titleFormat: ''DD MMM YYYY''
},
day: {
// options apply to basicDay and agendaDay views
}
},
events: [
{
title: ''The AI Summit 2016'',
start: YM + ''-03'',
end: YM + ''-06'',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: ''Spring 2016'',
start: YM + ''-09'',
end: YM + ''-14'',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: ''Virtual Assistant Summit'',
start: YM + ''-17'',
end: YM + ''-20'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: "O''Reilly Summit 2016",
start: YM + ''-23'',
end: YM + ''-26'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: ''SIGCHI 2016 Conference'',
start: YM + ''-18'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: ''Les Inggris 2016 Q4'',
start: YM + ''-11'',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: ''Minds Mastering Mac'',
start: YM + ''-05'',
end: YM + ''-07'',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: ''AAAI-16'',
start: YM + ''-18'',
end: YM + ''-20'',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: ''Service Experience'',
start: YM + ''-26'',
end: YM + ''-29'',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: ''Les Bahasa Perancis'',
start: YM + ''-26'',
backgroundColor: "#B3EFDA",
borderColor: "#00c983"
},
{
title: ''SMS Las Vegas 2016'',
start: YM + ''-27'',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: ''Leadership Training'',
start: YM + ''-27'',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: ''Leadership Training 2'',
start: YM + ''-28'',
end: YM + ''-30'',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: ''Leadership Camp Winter 2016'',
start: YM + ''-27'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: ''English Course'',
start: YM + ''-27'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: ''Sharing Session Hadoop'',
start: NEXTMONTH + ''-02'',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
],
eventTextColor: "#333",
/*
eventAfterAllRender: function() {
var events = $(''#calendar'').fullCalendar(''clientEvents'');
console.log(events);
//get all dates with events
var startDateWithEvent = [];
var endDateWithEvent = [];
for (var i = 0; i < events.length; i++) {
startDateWithEvent[i] = events[i].start._i;
endDateWithEvent[i] = events[i].end._i;
}
startDateWithEvent = startDateWithEvent.push(endDateWithEvent);
var dateWithEvent = startDateWithEvent.filter(function(item, pos) {
return startDateWithEvent.indexOf(item) == pos;
});
console.log(dateWithEvent);
//get event colors of each date
for (var i = 0; i < dateWithEvent.length; i++) {
for (var j = 0; j < events.length; j++) {
if (dateWithEvent[i] == events[j].start._i) {
var eventObject = {};
eventObject.date = dateWithEvent[i];
eventObject.title = events[j].title;
eventObject.backgroundColor = events[j].backgroundColor;
eventObject.borderColor = events[j].borderColor;
dayArray.push(eventObject);
}
}
}
//get hidden only events
for (var i = 0; i < dayArray.length; i++) {
}
}*/
});
});

#calendar table {
display: table;
border: none !important;
}
.calendar-example {
line-height: 1.3;
}
.calendar-example h2 {
font-size: 22px;
}
.calendar-example a[data-goto] {
color: #444;
}
.fc-title {
font-size: 12px !important;
}
.fc-center h2 {
font-size: 22px;
color: #00c983;
font-weight: 400;
}
#calendar thead {
border: none !important;
}
.fc-day-header {
border: none !important;
font-size: 13px;
}
.fc-head {
line-height: 40px;
border: none !important;
}
.fc-body {
background-color: #f8f8f8;
}
.fc-day {
/*border-left: none !important;
border-right: none !important;*/
}
.fc-head-container {
/*border-right: none !important;
border-left: none !important;*/
}
.fc-day-number {
font-size: 13px;
margin-right: 4px;
margin-top: 4px;
width: 24px;
height: 24px;
border-radius: 3px;
line-height: 24px;
text-align: center;
color: #777;
}
.fc-day-number:hover {
text-decoration: none !important;
color: #777;
}
.fc-today {
background-color: #E6FAF3 !important;
}
.fc-today .fc-day-number {
background-color: #00c983;
font-weight: 700;
color: #fff;
}
.fc-widget-content {
border-right: solid 8px #f8f8f8 !important;
border-left: solid 8px #f8f8f8 !important;
}
.fc-more-cell > div {
text-align: right;
margin-right: 8px;
font-size: 14px;
color: #777;
}
.fc-more-cell > div > a:hover {
text-decoration: none;
color: #333;
}
.fc-content {
padding: 1px 4px;
}
.fc-widget-header {
border: none !important;
}
.fc-time {
font-size: 12px;
font-weight: 700;
}
.fc-time.fc-widget-content {
border: none;
}
.fc-time-grid .fc-slats .fc-minor td {
border-top-style: none !important;
}
.fc-axis.fc-time.fc-widget-content {
transform: translate(-8px, -12px);
}
.fc-popover.fc-more-popover,
.fc-popover.fc-more-popover .fc-widget-header,
.fc-popover.fc-more-popover .fc-widget-content {
background-color: #fff !important;
}
.fc-axis.fc-widget-content {
font-size: 12px;
font-weight: 700;
}
#calendar .dot-event {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
vertical-align: text-bottom;
}
.red {
width: 10px;
height: 10px;
background-color: "#000";
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<div id="calendar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

¿Hay alguna forma de obtener las propiedades (especialmente los colores de fondo y contorno) de cada evento oculto? Porque quiero representar los eventos ocultos como puntos, así:

Intenté recuperar todos los eventos usando var events = $(''#calendar'').fullCalendar(''clientEvents''); pero no pude ver nada que diferencie los eventos ocultos y visibles. No hay nada en la documentación que esté cerca de manera remota para ayudarme en este problema.

Si eso no es posible, al menos dame una idea de cómo transformar todos los eventos en puntos solo en la pantalla móvil / más pequeña. Cambiar la .js de FullCalendar no es una solución posible por ahora, porque quiero mostrarlo en un fragmento. Además, ¿hay alguna manera de recolectar eventos cada día? Tal vez pueda irme de allí.

Lo siento por el código incorrecto ya que no soy un desarrollador, y esta es la primera vez que uso este complemento. Cualquier ayuda apreciada, gracias! :)

Answer 1

Ejecutar el fragmento y ver si eso es lo que querías?

La parte de CSS:

1. Agregué algunos nuevos CSS que puedes encontrar después de /* New CSS */ en el fragmento. #calendar .dot-event cabo el #calendar .dot-event , pero puede #calendar .dot-event los puntos a través de .fc-month-view .fc-day .fc-event-dot . (Es decir, utilicé los estilos / class puntos existentes en FullCalendar)

La parte JS:

1. dayArray el dayArray porque no es necesario. Luego establezco eventLimit en (y debe ser) false . También utilicé eventAfterRender y no eventAfterAllRender , y el único JS que agregué está en la función de devolución de llamada eventAfterRender .

La parte HTML:

Básicamente, no hay cambios. (excepto los modificados dinámicamente a través de JavaScript)

(También puedes comparar mi fragmento con el tuyo para ver qué ha cambiado).

$(function() {
var todayDate = moment().startOf(''day'');
var YM = todayDate.format(''YYYY-MM'');
var YESTERDAY = todayDate.clone().subtract(1, ''day'').format(''YYYY-MM-DD'');
var TODAY = todayDate.format(''YYYY-MM-DD'');
var TOMORROW = todayDate.clone().add(1, ''day'').format(''YYYY-MM-DD'');
var NEXTMONTH = todayDate.clone().add(1, ''month'').format(''YYYY-MM'');
$(''#calendar'').fullCalendar({
header: {
left: ''prev,next today'',
center: ''title'',
right: ''month,agendaWeek,agendaDay,listWeek''
},
editable: true,
eventLimit: false, // Always FALSE
navLinks: true,
timeFormat: ''HH:mm'',
slotLabelFormat: ''HH:mm'',
views: {
basic: {
// options apply to basicWeek and basicDay views
},
agenda: {
// options apply to agendaWeek and agendaDay views
},
week: {
columnHeaderFormat: ''ddd D'',
titleFormat: ''DD MMM YYYY''
},
day: {
// options apply to basicDay and agendaDay views
}
},
events: [
{
title: ''The AI Summit 2016'',
start: YM + ''-03'',
end: YM + ''-06'',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: ''Spring 2016'',
start: YM + ''-09'',
end: YM + ''-14'',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: ''Virtual Assistant Summit'',
start: YM + ''-17'',
end: YM + ''-20'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: "O''Reilly Summit 2016",
start: YM + ''-23'',
end: YM + ''-26'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: ''SIGCHI 2016 Conference'',
start: YM + ''-18'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: ''Les Inggris 2016 Q4'',
start: YM + ''-11'',
backgroundColor: "#BCE4FD",
borderColor: "#26A8FB"
},
{
title: ''Minds Mastering Mac'',
start: YM + ''-05'',
end: YM + ''-07'',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: ''AAAI-16'',
start: YM + ''-18'',
end: YM + ''-20'',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: ''Service Experience'',
start: YM + ''-26'',
end: YM + ''-29'',
backgroundColor: "#eee",
borderColor: "#aaa"
},
{
title: ''Les Bahasa Perancis'',
start: YM + ''-26'',
backgroundColor: "#B3EFDA",
borderColor: "#00c983"
},
{
title: ''SMS Las Vegas 2016'',
start: YM + ''-27'',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: ''Leadership Training'',
start: YM + ''-27'',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: ''Leadership Training 2'',
start: YM + ''-28'',
end: YM + ''-30'',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
{
title: ''Leadership Camp Winter 2016'',
start: YM + ''-27'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: ''English Course'',
start: YM + ''-27'',
backgroundColor: "#FFBCBA",
borderColor: "#D9624F"
},
{
title: ''Sharing Session Hadoop'',
start: NEXTMONTH + ''-02'',
backgroundColor: "#DACAFD",
borderColor: "#8652FB"
},
],
eventTextColor: "#333",
eventAfterRender: function( event, element, view ){
// Enable for the ''month'' view only.
if ( ''month'' !== view.name ) {
return;
}
var a = moment( event.start, ''YYYY-MM-DD'' ),
b = moment( event.end, ''YYYY-MM-DD'' ),
duration = moment.duration( b.diff( a ) ),
row = element.closest( ''.fc-row'' ),
d = a.clone(), i, c;
var title = event.title;
if ( b.isValid() ) {
title += '' ('' + $.fullCalendar.formatRange( a, b, ''MMM D YYYY'' ) + '')'';
}
// Add the event''s "dot", styled with the appropriate background color.
for ( i = 0; i <= duration._data.days; i++ ) {
if ( 0 === 1 ) {
c = a;
} else {
d.add( 1, ''days'' );
c = d;
}
row.find( ''.fc-day[data-date="'' + c.format( ''YYYY-MM-DD'' ) + ''"]'' )
.append(
''<a href="#" class="fc-event-dot" onclick="return false;" '' +
''style="background-color: '' + event.backgroundColor + '';" '' +
''title="'' + title + ''"></a>''
);
}
// Here you can either completely remove the default element, or just
// hide it visually on screen.
element.remove();
//element.addClass( ''hidden'' );
}
});
});

#calendar table {
display: table;
border: none !important;
}
.calendar-example {
line-height: 1.3;
}
.calendar-example h2 {
font-size: 22px;
}
.calendar-example a[data-goto] {
color: #444;
}
.fc-title {
font-size: 12px !important;
}
.fc-center h2 {
font-size: 22px;
color: #00c983;
font-weight: 400;
}
#calendar thead {
border: none !important;
}
.fc-day-header {
border: none !important;
font-size: 13px;
}
.fc-head {
line-height: 40px;
border: none !important;
}
.fc-body {
background-color: #f8f8f8;
}
.fc-day {
/*border-left: none !important;
border-right: none !important;*/
}
.fc-head-container {
/*border-right: none !important;
border-left: none !important;*/
}
.fc-day-number {
font-size: 13px;
margin-right: 4px;
margin-top: 4px;
width: 24px;
height: 24px;
border-radius: 3px;
line-height: 24px;
text-align: center;
color: #777;
}
.fc-day-number:hover {
text-decoration: none !important;
color: #777;
}
.fc-today {
background-color: #E6FAF3 !important;
}
.fc-today .fc-day-number {
background-color: #00c983;
font-weight: 700;
color: #fff;
}
.fc-widget-content {
border-right: solid 8px #f8f8f8 !important;
border-left: solid 8px #f8f8f8 !important;
}
.fc-more-cell > div {
text-align: right;
margin-right: 8px;
font-size: 14px;
color: #777;
}
.fc-more-cell > div > a:hover {
text-decoration: none;
color: #333;
}
.fc-content {
padding: 1px 4px;
}
.fc-widget-header {
border: none !important;
}
.fc-time {
font-size: 12px;
font-weight: 700;
}
.fc-time.fc-widget-content {
border: none;
}
.fc-time-grid .fc-slats .fc-minor td {
border-top-style: none !important;
}
.fc-axis.fc-time.fc-widget-content {
transform: translate(-8px, -12px);
}
.fc-popover.fc-more-popover,
.fc-popover.fc-more-popover .fc-widget-header,
.fc-popover.fc-more-popover .fc-widget-content {
background-color: #fff !important;
}
.fc-axis.fc-widget-content {
font-size: 12px;
font-weight: 700;
}
/*#calendar .dot-event {
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
margin-left: 10px;
vertical-align: text-bottom;
}*/
.red {
width: 10px;
height: 10px;
background-color: "#000";
}
/* New CSS */
.fc-month-view .fc-row .fc-day {
/* Aligns the event dots at the bottom of the cell. */
vertical-align: bottom;
}
.fc-month-view .fc-day .fc-event-dot {
cursor: default;
/* Gives some spacing between the dots in a cell. */
margin-right: 2px;
}
.fc-month-view .hidden {
display: none;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.11/css/all.css" integrity="sha384-p2jx59pefphTFIpeqCcISO9MdVfIm4pNnsL08A6v5vaQc4owkQqxMV8kg4Yvhaw/" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css">
<h3>Hover over the dot.</h3>
<div id="calendar"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js"></script>

Answer 2

En primer lugar, el título de su pregunta Full Calendar obtiene propiedades de eventos ocultos no es su requisito exacto. Porque en este sentido @Mariana ya ha respondido.

Su requisito real es mostrar los eventos como puntos utilizando el calendario completo.

La respuesta a este requisito es que actualmente el Calendario completo no proporciona una función para mostrar eventos como puntos de colores .

Pero tienes las siguientes alternativas para lograr esto:

1. Use Bootstrap Calendar que es fácil de usar e integrar también. GitHub
2. Use Angular Bootstrap Calendar pero para eso necesita usar AngularJS en su proyecto. La captura de pantalla de la salida esperada en tu pregunta es de Angular Bootstrap Calendar .
3. Personalice la biblioteca del calendario completo según sus necesidades (por supuesto, esto requiere tiempo y no es una buena solución)

Espero que esto te ayudará.

Answer 3

No es una solución completa, pero esto puede ayudar como una solución rápida que lo lleva a parte del camino.

Puede convertir los enlaces "más" en un número correspondiente de puntos en los que se puede hacer clic como grupo para mostrar la ventana emergente haciendo algo como lo siguiente:

Configure eventLimitText: '''' para eliminar el texto "más" (hace que sea más fácil obtener el número de eventos del texto). Luego, obtenga todos los enlaces "más" y conviértalos al número relevante de puntos.

Ejemplo JS:

$(''.fc-more'').each((i, elem) => {
let $elem = $(elem);
let num = $elem.text();
num = parseInt(num.substring(1));
$elem.text('''');
for (let j = 0; j < num; j++) {
$elem.append(''<div class="dot"></div>'');
}
});

Ejemplo CSS:

.dot {
background-color: blue;
width: 8px;
height: 8px;
margin-right: 2px;
border-radius: 50%;
display: inline-block;
}

Es importante tener en cuenta que esto no crea un punto en el que se pueda hacer clic individualmente y que corresponda a un evento único que coincida con su color de evento. Es posible que llegar a esa solución no sea trivial (es posible que tenga que establecer eventLimit: false y recorrer todos los clientEvents para determinar qué días tienen más eventos de los que desea, convierta los eventos adicionales en puntos seleccionables individualmente según el color del objeto del evento y otros propiedades, cree su propia ventana emergente para mostrar al hacer clic, etc).

Answer 4

Tal vez, en lugar de obtener eventos ocultos, intente cambiar el estilo de los eventos según el tipo de vista. Entonces, en los eventos de vista de mes serían puntos. Podría usar la devolución de llamada de eventRender ( https://fullcalendar.io/docs/eventRender )

También puede filtrar todos los eventos de cliente cargados por la vista actual y obtener sus propiedades usando $(''#calendar'').fullCalendar(''clientEvents'', filter) ( https://fullcalendar.io/docs/clientEvents )

Answer 5

en esta situación, el calendario completo proporciona la función de procesamiento de eventos. Todos los eventos que pasan por el procesamiento de eventos deben verificar cada uno de los eventos de acuerdo con el diseño del punto, etc.

eventRender: function(event, element) {
console.log(event);//here each event printed one bu one as render.start
//and end date of event
if(event.end){
///check the start and end date difference
}else {
//No end date for event
}
if(event.backgroundColor == ''#BCE4FD''){
} }