GanttCalendar Demo

Démo du mode "Affichage hebdomadaire" avec 4 niveaux de zoom.
Retour à l'article | Calendrier Mensuel | Tests des calendriers

Zoom :

$(function() {
	// Definition : EventCal(ressourceId, eventId, startDay, endDay, label)
	
	var evt1 = new EventCal(1, "event_001", 4, 5, "Event Paris - WSDD");
	var evt2 = new EventCal(2, "event_002", 5, 7, "Paris - WSDD(2-5)");
	var evt2_bis = new EventCal(2, "event_002_bis", 4, 6, "Réunion");
	var evt3 = new EventCal(2, "event_003", 14, 17, "Préparation Evènement");
	var evt5 = new EventCal(3, "event_005", 9, 11, "Week-end");
	var evt5_bis = new EventCal(3, "event_005_bis", 8, 9.5, "Réunion");
	var evt5_ter = new EventCal(3, "event_005_ter", 6.5, 8.5, "Transfert");
	var evt6 = new EventCal(4, "event_006", 9, 11, "Week-end");
	var evt7 = new EventCal(5, "event_007", 9, 11, "Week-end");
	var evt8 = new EventCal(6, "event_008", 9, 11, "Week-end");
	var evt9 = new EventCal(7, "event_009", 9, 11, "Week-end");
	var evt10 = new EventCal(8, "event_010", 9, 11, "Week-end");
	var evt11 = new EventCal(9, "event_011", 9, 11, "Week-end");
	var evt12 = new EventCal(10, "event_012", 9, 11, "Week-end");
	var evt13 = new EventCal(11, "event_013", 9, 11, "Week-end");
	var evt14 = new EventCal(1, "event_014", 9, 11, "Week-end");
	var evt15 = new EventCal(2, "event_015", 9, 11, "Week-end");

	var evt101 = new EventCal(101, "event_101", 7, 8, "Répétition générale");
	var evt102 = new EventCal(102, "event_102", 6, 8, "Contrôle qualité");

	var timeline = new TimeLineWeek("myGanttCalendar",10, 2013,
			{groups: 
				[  {name: "Singers",
					id: 1,
					resources: [{name:"Henri", id:1}, 
					             {name:"Frank", id:2},
					             {name:"Jenny", id:3},
					             {name:"Stan", id:4},
					             {name:"Sammy", id:5},
					             {name:"Jason", id:6},
					             {name:"Robert", id:7},
					             {name:"Madison", id:8},
					             {name:"Juliette", id:9},
					             {name:"Nassa", id:10},
					             {name:"Tamara", id:11}]
				}, {name: "Objects",
					id: 2,
					resources: [{name:"Micro",id:101}, 
					             {name:"Ampli", id:102}]
				}]
			},
			function(){ // updateCallback()
				switch(this.year){
					case 2011:
						break;
					case 2013:
						switch (this.weekNumber) {
						case 10:
							evt1.drawIn(this);
							evt2.drawIn(this);
							evt2_bis.drawIn(this);
							evt5.drawIn(this);
							evt5_bis.drawIn(this);
							evt5_ter.drawIn(this);
							evt6.drawIn(this);
							evt7.drawIn(this);
							evt8.drawIn(this);
							evt9.drawIn(this);
							evt10.drawIn(this);
							evt11.drawIn(this);
							evt12.drawIn(this);
							evt13.drawIn(this);
							evt14.drawIn(this);
							evt15.drawIn(this);
							evt101.drawIn(this);
							evt102.drawIn(this);
							
							evt1.jObject.addClass("specialEvent");
							evt2.jObject.addClass("flagEvent");
							evt5.jObject.addClass("flagEvent");
							break;
						case 11:
							evt3.drawIn(this);
							break;

						default:
							break;
						}
						break;
					default:
						break;
				}
				this.updateOccupation();
			}
	);

	timeline.lang = 'fr';
	timeline.cellWidth = 150;
	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+10);
		infoBox.css("top",y+15);
		infoBox.show();
	});
	evt1.jObject.mouseout(function(e){
		$("#info_evt1").hide();
	});
	
	/** 
	 * Zoom feature
	 */
	 $( "#zoomSlider" ).slider({ min:50, max: 200, step: 50, 
		 value: timeline.cellWidth, 
		 change: function( event, ui ) { 
			timeline.cellWidth = ui.value;
			timeline.drawElements();
			timeline.updateWeekCallback(); 
			$("#zoomValue").html(ui.value);
		 } 
	 });
	 $("#zoomValue").html(timeline.cellWidth);
});