GanttCalendar Demo

Démo du mode "Affichage mensuel" avec 4 niveaux de zoom.
Retour à l'article | Calendrier Hebdomadaire

$(function() {
	// Definition : Event(ressourceId, eventId, startDay, endDay, label)
	
	// 2012 - oct :
	var evt1 = new EventCal(1, "event_001", 2, 5, "Event Paris - WSDD");
	var evt2 = new EventCal(2, "event_002", 2, 5, "Paris - WSDD(2-5)");
	var evt5 = new EventCal(3, "event_005", 4, 15, "Long journey");
	var evt6 = new EventCal(1, "event_006", 6, 10, "Visit Stan LONE");
	var evt7 = new EventCal(1, "event_007", 12, 19, "Confirm Dentist");
	var evt8 = new EventCal(4, "event_008", 6, 10, "Visit Stan LONE");
	var evt9 = new EventCal(5, "event_009", 10, 15, "Maintenance");
	
	// 2012 - nov :
	var evt3 = new EventCal(3, "event_002", 3, 5, "SF - EEES(3-5)");
	var evt3bis = new EventCal(3, "event_002BIS", 8, 14, "SF - Paintings");
	var evt4 = new EventCal(4, "event_003", 7, 9, "team (7-9)");

	var timeline = new TimeLineMonth("myGanttCalendar",10, 2012,
			{groups: 
				[  {name: "Singers",
					id: 1,
					resources: [{name:"Henri", id:1}, 
					             {name:"Frank", id:2},
					             {name:"Jenny", id:3}]
				}, {name: "Objects",
					id: 2,
					resources: [{name:"Micro",id:4}, 
					             {name:"Ampli", id:5}]
				}]
			},
			function(){
				switch(this.year){
					case 2011:
						break;
					case 2012:
						switch (this.month) {
						case 10:
							evt1.drawIn(this);
							evt1.jObject.addClass("specialEvent");
							evt2.drawIn(this);
							evt2.jObject.addClass("flagEvent");
							evt5.drawIn(this);
							evt5.jObject.addClass("flagEvent");
							evt6.drawIn(this);
							evt6.jObject.addClass("lockEvent");
							evt7.drawIn(this);
							evt7.jObject.addClass("unlockEvent");
							evt8.drawIn(this);
							evt9.drawIn(this);
							break;
						case 11:
							evt3.drawIn(this);
							evt3bis.drawIn(this);
							evt3bis.jObject.addClass("lockEvent");
							evt4.drawIn(this);
							break;

						default:
							break;
						}
						break;
					default:
						break;
				}
			}
	);

	timeline.lang = 'en';
	timeline.cellWidth = 40;
	timeline.drawElements();
	timeline.updateCallback();

	
	evt1.jObject.mouseover(
	function(e){
		var infoBox = $("#info_evt1");
		var x = e.pageX - this.offsetLeft;
		var y = e.pageY - this.offsetTop;
		infoBox.css("left",x+60);
		infoBox.css("top",y+15);
		infoBox.show();
	});
	evt1.jObject.mouseout(function(e){
		$("#info_evt1").hide();
	});
	
	
	/** 
	 * Zoom feature
	 */
	 $( "#zoomSlider" ).slider({ min:20, max: 50, step: 10, 
		 value: timeline.cellWidth, 
		 change: function( event, ui ) { 
			timeline.cellWidth = ui.value;
			timeline.drawElements();
			timeline.updateMonthCallback(); 
			$("#zoomValue").html(ui.value);
		 } 
	 });
	 $("#zoomValue").html(timeline.cellWidth);
});