Fullcalendar eventos

[xfiles1231]

Hola amigos estoy solicitando de su apoyo, ya que estoy implementando este fabuloso jquery [URL="http://arshaw.com/fullcalendar/"]Fullcalendar [/URL]pero no encuentro la manera de manipular los eventos que se ingresan, no se de que manera guardar los datos de los eventos, alguien a trabajado con este jquery? mi web es [URL="http://drailiana.webcindario.com/calendario.html"]Agenda[/URL] ya lo modifique todo a mi gusto, pero me falta esa parte. Gracias

[jfableon]

Hola amigo,

Podrías utilizar dayClick, donde se puede crear una función que se ejecuta al hacer clic en un día visible en el calendario, para hacer aparecer un formulario y desde allí crear el evento.

Te describo lo que yo haría:
- Inicialmente se puede crear una especie de formulario en HTML
<div id="form_crea_evento">
<input type="hidden" id="input_date" />
<input type="hidden" id="input_allDay" />
Descripcion: <input type="texto" id="input_Titulo" />
Otro Dato1: <input type="texto" id="input_OtroDato1" />
Otro Dato1: <input type="texto" id="input_OtroDato2" />
</div>

- Luego el código java script sería mas o menos así:

$(document).ready(function() {

// Desde el inicio se oculta el formulario
$("#form_crea_evento").hide();

// se usa el jqueryui para que se vea como un cuadro de diálogo al desplegarlo
$("#dv_formMtto").dialog({
autoOpen: false,
width:300,
height:400,
position: [30,100],
modal: true,
});

// Creación del calendario, incluye la función para capturar el clic en un día del calendario:
var calendar = $('#calendar').fullCalendar({
dayClick: function(date, allDay, jsEvent, view){
//captura los datos de fecha en inputs de tipo hidden
$("#input_date").val($.fullCalendar.formatDate( date, 'yyyy-MM-dd HH:mm:ss' ));
$("#input_allDay").val(allDay);
//Mostrar el formulario
jQuery("#form_crea_evento").dialog("option","butto ns",{
"Guardar": fn_Guardar,
"Cancelar": function() { jQuery(this).dialog( "close" ); }
};
});
});


// Al hacer clic en el botón Guardar del form
function fn_Guardar(){
//hay que validar los datos

//si los datos son validos continuamos

//datos a enviar
var venvio = {
fecha: $("#input_date").val(),
allDay: $("#input_allDay").val(),
titulo: $("#input_Titulo").val(),
otrodato1: $("#input_OtroDato1").val(),
otrodato2: $("#input_OtroDato2").val()
};
//luego envía por ajax para guardar el evento en la base de datos
$.post("guarda_evento.php", venvio, function(data){
//validar que se haya guardado correctamente en el php

// si se guardo correctamente continuar

//crea el evento en el calendario
var evento = $('#calendar').fullCalendar.data('eventObject'); //No estoy muy seguro de si así sería
evento.id = data.id; //si se recupera algún código ó id desde el php
evento.title = $("#input_Titulo").val();
evento.start = $("#input_date").val();
$('#calendar').fullCalendar('renderEvent', copiedEventObject);

//vuelve a esconder el form
jQuery("#form_crea_evento").dialog("close");
})
});


Sería necesario incluir jquery y jqueryui para que funcione. Bueno, la idea es esa. Espero que funcione y te sirva.

[giorgio_83]

Hola, jfableon, tu codigo me ha servido de mucho ya soy capaz de mostrar un formulario para añadir eventos al fullcalendar, refrescarlos, y modificarlos al hacer click sobre ellos, a partir de tu codigo he podido hacerlo todo. Muchas gracias por el aporte.

Pero ahora se me plantea una duda, y es que me gustaria poder cargar los eventos en base al valor de un campo, es decir, en base de datos yo tengo un campo en la tabla eventos que contiene el identificador del dueño de ese evento, entonces me gustaria saber como podria pasarle ese parametro al full calendar para que carge solo los eventos de ese propietario, como el full calendar lo estoy cargando desde un fichero .php que hace la consulta y me trae todos los eventos, habia pensado pasar un parametro a ese fichero y asi cargarle una where a la consulta que me trae los eventos, pero no se como pasarle ese parametro antes de que carge el fullcalendar, ya que el fichero ya se le pasa en la carga del calendario de esta forma es decir en la configuración inicial, en el javascript:



$('#calendar').fullCalendar({
height: 450,
contentHeight: 200,
aspectRatio: 3,
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
disableDragging: true,
firstDay: 1,
weekends: true,
defaultEventMinutes:30,
monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio','Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'],
monthNameShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun','Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
dayNames: ['Domingo', 'Lunes', 'Martes', 'Miercoles','Jueves', 'Viernes', 'Sabado'],
dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
buttonText: {
today: 'hoy',
month: 'mes',
week: 'semana',
day: 'dia'

},
allDaySlot: false,
allDayText: 'Todo el dia',
axisFormat: 'H:mm',




events: "json-events.php",
timeFormat: 'H:mm{ - H:mm}',
eventDrop: function(event, delta) {
alert(event.title + ' was moved ' + delta + ' days\n' +
'(should probably update your database)');
},

Sabes como podria pasarle ese parametro? quizá con un campo oculto en la pagina y recogiendolo con javascript? quizá asi? "json-events.php?id=$("#input_mod").val(calEvent.id);"

Gracias de antemano y un saludo.

[iviamontes]

eventDrop: function(event, delta, dayDelta) {

$.post("drop_event.php", { id: event.id, start: delta, end: event.end }, function(data){ alert(data); });
}
ya que en cargo el id de cada elemento el json de json-events.php

[Ricrever]

Hola comunidad, voy a repescar el tema por si vosotros me podeis ayudar, resulta que me he decantado por instalar el pluing full_calendar para mi sitio, me funciona todo a la perfección, però no soy capaz de ver el calendario, las inserciones a la bd me las hace, pero view calendar no muestra nada :S

Alguna sugerencia amigos???

Gracias de antemano!!!!

[a7uc4rd]

Amigo jfableon , La respuesta que diste aun no se como implementarla, les suplico me ayuden pues cuando pongo el script, en el mismo php donde tengo el calendario me desaparece este(el calendario), lo unico que quiero es guardar los eventos que se crean al darles click sobre el calendario en una base de datos, si es pocible que me pasen el fuente o algo asi, muchas gracias

[Remago]

Oye giorgio_83 y puedes resolver que al darle clic al dia dentro del calendario te mande a la pestaña dia con los datos de los eventos que tienes en ese dia especifico?

[giorgio_83]

Buenas remago, esa funcionalidad ya la trae implementada el wdcalendar, si pinchas en el nombre del dia te lleva a la vista dia con todos sus eventos. Pruebalo.
saludos.

[Remago]

si muchas gracias eso si lo se.. pero de igual forma resolvi el problema que tenia esque queria que al darle clic a un dia de la vista mes, me enviara a la vista dia con el valor del dia que habia clickeado en el calendario...

lo hice asi:

dayClick: function(date, view) {
$('#calendar').fullCalendar('changeView', 'agendaDay');
$('#calendar').fullCalendar('gotoDate', date);
},

Pero ahora necesito mostrar los datos alojados en mi base en el calendario, ya los recupero y todo pero quiero que en la vista mes no se muestren todos los eventos sino que digamos por ejemplo: en ves del nombre del evento que hay se muestre la cantidad de eventos ya que si hay 5 eventos en la vista mes me muestra el detalle de los 5 eventos lo cual satura el calendario entonces lo que yo quiero es que no lo sature sino que solo muestre la cantidad digamos que diga para la fecha de hoy 4 eventos y al darle clic a la vista dia me muestre el detalle de los eventos sabes como hacerlo???

[giorgio_83]

Hola Remago, lo que te planteas hacer, si no recuerdo mal creo que dentro de lo que es el núcleo del calendario, si buscas por los métodos debe de haber uno que pinta los eventos dentro de todas las vistas, pero dentro de ese método hay un switch que según la vista en la que estemos llama a un método o a otro para pintar los eventos, entonces en tu caso tendrías que comentar esa llamada para que no cargue los eventos y sustituirla en su lugar por un método que tu te crees que lo haga sea contar los eventos nada mas y cargar el número.

Si no recuerdo mal los métodos se llamaban algo como buildDayEventsMonth o algo así.

Saludos.

[Remago]

Si yo encontre algo que toma el nombre de la vista y con eso puedo hacer un if pero no se porque no me muestra los datos de la base te mostrare como tengo el codigo no se donde esta el error:

Código HTML:

<script type='text/javascript'>

	$(document).ready(function() {
	
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		var calendar = $('#calendar').fullCalendar({
			theme: true,
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			
			//selectable: true, //Deshabilita la seleccion en los dias

			selectHelper: true,


			dayClick: function(date, view) {
				$('#calendar').fullCalendar('changeView', 'agendaDay');
				$('#calendar').fullCalendar('gotoDate', date);
				},


			select: function(start, end, allDay) {
				var title = prompt('Event Title:');
				if (title) {
					
					//calendar.fullCalendar('renderEvent',
						calendar.fullCalendar('renderEvent',
						{
							title: title,
							start: start,
							end: end,
							allDay: allDay
						},
						true // make the event "stick"
					);
			
				}
				calendar.fullCalendar('unselect');
			},
			editable: false, //Deshabilita que se modifique el evento
			
			//Diferenciar los tipos de vista y hacer rerender	
			viewDisplay: function(view) {
            
                if (view.name == 'agendaWeek') { 
                	//Asignamos eventos para Vista Semana
                	//alert('Semana');
                	events: [
				        {
				            title: 'Event1',
				            start: new Date(y, m, d),
					    end: new Date(y, m, d),
					    allDay: false
				        },
				    ]	
	            }

                if (view.name == 'agendaDay') { 
                	//Asignamos eventos para Vista Dia
                	//alert('Dia');
                	events: [
				        {
				            title: 'Event2',
				            start: new Date(y, m, d),
					    end: new Date(y, m, d),
					    allDay: false
				        },
				    ]	                	
                }

                if (view.name == 'month') { 
                	//Asignamos eventos para Vista Mes
                	//alert('Mes');
                	events: [
				        {
				            title: 'Event3',
				            start: new Date(y, m, d),
					    end: new Date(y, m, d),
					    allDay: false
				        },
				    ]	                	
                }
        	}
        	//FINALIZA FUNCION ViewDisplay
     });	
		
	});
</script> 

Lo que quiero es diferenciar en la vista que me encuentro y lo hago con el alert que va comentariado pero no me muestra los eventos que tengo en cada diferenciador por ejemplo si estoy en la vista mes que me muestre el titulo evento 3 y asi.. con los demas.. espero su respuesta muchas gracias