W pierwszej części poradnika http://piotrooo.com/2010/01/kalendarz-google-w-jquery-cz-1/ pokazałem jak generować kalendarz, jak dodawać nowe zdarzenia i wyświetlać je w kalendarzu czas na pozostałą obsługę zdarzeń mianowicie zmiana rozmiaru zdarzenia (czyli zmiana czasu), edycja i usuwanie. Zapraszam do lektury.

1. Zmiana godzin zlecenia – czyli rozszerzamy i przenosimy zdarzenia

To zmian rozmiarów (czasów, aczkolwiek dla uproszczenia będę używał słów zmian rozmiarów) zdarzenia odpowiedzialna jest metoda eventResize. A do zmiany całych dni za pomocą Drag ‘n Drop odpowiedzialna jest funkcja eventDrop. Oczywiście do zmiany będą nam potrzebne dane które przechwycimy w pliku kalnedarz_do.php. Obsłużenie tych metod po strobie jQuery wygląda następująco:

 Javascript |  copy code |? 
01
eventDrop : function(calEvent, $event) {
02
	$.ajax({
03
		type : "GET",
04
		url: "kalendarz_do.php?co=resize&id="+calEvent.id+"",
05
		data: ({start: new Date(calEvent.start)/1000, end: new Date(calEvent.end)/1000})
06
	});
07
},
08
eventResize : function(calEvent, $event) {
09
	$.ajax({
10
		type : "GET",
11
		url: "kalendarz_do.php?co=resize&id="+calEvent.id+"",
12
		data: ({start: new Date(calEvent.start)/1000, end: new Date(calEvent.end)/1000})
13
});

I teraz obsługa tych zdarzeń po stronie serwera aby w naszej bazie coś się zmieniło. Jak pewnie zauważyliście przekazuje również ID tego zdarzenia aby można było jednoznacznie określić co ma być edytowane, plik kalendarz_do.php:

 PHP |  copy code |? 
1
if ($_GET['co']=='resize')
2
{
3
	$baza->quick_sel("UPDATE kalendarz SET start=('1970-01-01 00:00'::timestamp + interval '{$_GET['start']}')::timestamp at time zone 'GMT',
4
			koniec=('1970-01-01 00:00'::timestamp + interval '{$_GET['end']}')::timestamp at time zone 'GMT'
5
			WHERE id={$_GET['id']}");
6
}

I teraz po zmianie rozmiaru (czasu), przeciągnięciu i upuszczeniu na inny dzień możemy zaobserwować zmiany.

2. Edytowanie i usuwanie zdarzeń

Umiemy już dodać, wyświetlić, zmienić dane to teraz czas na edycję i usuwanie. Można powiedzieć że jest to najbardziej skomplikowana część naszego kalendarza. Aby zrealizować tą funkcjonalność należy obsłużyć metodę eventClick. Obsługa tej metody wygląda następująco: 

 Javascript |  copy code |? 
01
eventClick : function(calEvent, $event) {
02
	if (calEvent.readOnly) {
03
		return;
04
	}
05
 
06
	var $dialogContent = $("#event_edit_container");
07
	resetForm($dialogContent);
08
	var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
09
	var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
10
	var titleField = $dialogContent.find("input[name='title']").val(calEvent.title);
11
	var bodyField = $dialogContent.find("textarea[name='body']");
12
	bodyField.val(calEvent.body);
13
 
14
	$dialogContent.dialog({
15
		modal: true,
16
		height: 260,
17
		width: 400,
18
		title: "Edytuj zlecenie - " + calEvent.title,
19
		close: function() {
20
			$dialogContent.dialog("destroy");
21
			$dialogContent.hide();
22
			$('#calendar').weekCalendar("removeUnsavedEvents");
23
		},
24
		buttons: {
25
			Zamknij : function() {
26
				$dialogContent.dialog("close");
27
			},
28
			Usuń : function() {
29
				$calendar.weekCalendar("removeEvent", calEvent.id);
30
				$.ajax({
31
				type : "GET",
32
				url: "kalendarz_do.php?co=del&id="+calEvent.id+""
33
				});
34
				$dialogContent.dialog("close");
35
			},
36
			Zapisz : function() {
37
				calEvent.start = new Date(startField.val());
38
				calEvent.end = new Date(endField.val());
39
				calEvent.title = titleField.val();
40
				calEvent.body = bodyField.val();
41
 
42
				$calendar.weekCalendar("updateEvent", calEvent);
43
				var $this=$(this); 
44
				$.ajax({
45
					type : "GET",
46
					url: "kalendarz_do.php?co=edit&id="+ calEvent.id +"",
47
					data: ({start: new Date(startField.val())/1000, end: new Date(endField.val())/1000, title: titleField.val(), body: bodyField.val()})
48
				});
49
				$dialogContent.dialog("close");
50
			}
51
		}
52
	}).show();
53
 
54
	var startField = $dialogContent.find("select[name='start']").val(calEvent.start);
55
	var endField = $dialogContent.find("select[name='end']").val(calEvent.end);
56
	$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
57
	setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));
58
	$(window).resize().resize();
59
}

Najważniejszymi elementami tej metody jest stworzenie okienka dialogowego w którym umieścimy dwie select listy z możliwością wyboru godzin i zaznaczoną godziną zdarzenia i polami tekstowymi z danymi. Po raz kolejny widzimy wywołanie funkcji setupStartAndEndTimeFields, wyglądającą:

 Javascript |  copy code |? 
01
function setupStartAndEndTimeFields($startTimeField, $endTimeField, calEvent, timeslotTimes) {
02
 
03
      for (var i = 0; i < timeslotTimes.length; i++) {
04
         var startTime = timeslotTimes[i].start;
05
         var endTime = timeslotTimes[i].end;
06
         var startSelected = "";
07
         if (startTime.getTime() === calEvent.start.getTime()) {
08
            startSelected = "selected=\"selected\"";
09
         }
10
         var endSelected = "";
11
         if (endTime.getTime() === calEvent.end.getTime()) {
12
            endSelected = "selected=\"selected\"";
13
         }
14
         $startTimeField.append("<option value=\"" + startTime + "\" " + startSelected + ">" + timeslotTimes[i].startFormatted + "</option>");
15
         $endTimeField.append("<option value=\"" + endTime + "\" " + endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");
16
 
17
      }
18
      $endTimeOptions = $endTimeField.find("option");
19
      $startTimeField.trigger("change");
20
   }
21
 
22
   var $endTimeField = $("select[name='end']");
23
   var $endTimeOptions = $endTimeField.find("option");

To ona odpowiada za poprawne wyświetlenie czasów zdarzeń. Przyjrzyjmy się teraz przyciskom Usuń i Zapisz.

Przycisk Usuń

 Javascript |  copy code |? 
Usuń : function() {
	$calendar.weekCalendar("removeEvent", calEvent.id);
	$.ajax({
		type : "GET",
		url: "kalendarz_do.php?co=del&id="+calEvent.id+""
	});
	$dialogContent.dialog("close");
}

Ten przycisk przekazuje nam do pliku kalendarz_do.php akcje jaka ma być wykonana na tym zdarzeniu, czyli w tym wypadku del (usunięcie) i ID rekordu (zdarzenia) które ma być usunięte. I teraz kod który wykonany zostanie po stronie serwera, czyli samo usunięcie z bazy:

 PHP |  copy code |? 
if ($_GET['co']=='del')
{
   "DELETE FROM kalnedarz WHERE id={$_GET['id']}"
}

Przycisk Zapisz

 Javascript |  copy code |? 
Zapisz : function() {
	calEvent.start = new Date(startField.val());
	calEvent.end = new Date(endField.val());
	calEvent.title = titleField.val();
	calEvent.body = bodyField.val();
 
	$calendar.weekCalendar("updateEvent", calEvent);
	var $this=$(this); 
	$.ajax({
		type : "GET",
		url: "kalendarz_do.php?co=edit&id="+ calEvent.id +"",
		data: ({start: new Date(startField.val())/1000, end: new Date(endField.val())/1000, title: titleField.val(), body: bodyField.val()})
	});
	$dialogContent.dialog("close");
}

Po naćiśnięciu tego przycisku do pliku kalendarz_do.php przekazane zostają dwie zmienne jaka akcja ma być wykonywana – edit (edycja) i ID rekordu do zmiany. Teraz czas na obsługę tego zdarzenia po stronie serwera.

 PHP |  copy code |? 
if ($_GET['action']=='edit')
{
	"UPDATE kalendarz SET start=('1970-01-01 00:00'::timestamp + interval '{$_GET['start']}')::timestamp at time zone 'GMT',
		koniec=('1970-01-01 00:00'::timestamp + interval '{$_GET['end']}')::timestamp at time zone 'GMT',
		title='{$_GET['title']}', body='{$_GET['body']}' WHERE id={$_GET['id']}");
}

4. Epilog

Teraz już mamy w pełni obsłużone dodawanie, edycję, usuwanie i pokazywanie zdarzeń za pomocą kalendarza jQuery i dynamicznych danych pobieranych z bazy SQL.