Gestion par calendrier des fiches journalières du planning

**Enguerrand.P** · 03/04/2014, 11h47

Bonjour,

Je cherche a mettre au point une page qui me permet grâce à un calendrier de gérer les fiche quotidienne du planning.

Présentation de la page :

/-------------------------------------------------------------------------------
/ ! Name worker!^!
/ ! < Month> ! < Year > !______
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!CALENDRIER!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/ !___!___!___!___!___!___!___!
/
/ !______________________________________________________
/ !
/ !
/ !
/ ! PARTIE BASSE
/ !
/ !
/ !
/ !
/ !______________________________________________________!
/
/_____________________________________________________________
/-------------------------------------------------------------------------------

Fonctionnement souhaiter:
0- Initialisation de la page : On clone le Tableau on change l'id du clone, on fait apparaitre le clone, on masque l'originale, on mais la date du jours dans l'input date du tableau
1- Lorsque la page est charger on doit avoir dans la partie basse un tableau avec un input qui contient la date du jour
2- Sélection d'un jour par le calendrier:
2.1-On test si on a déjà créer un tableau pour cette date
2.2-Si oui on le fait apparaitre
2.3-Si non on le créer:
En clonent le tableau original, changent son id puis en l'affichant.
On mais la date du jour sélectionner dans l'input du jour du nouveau tableau cloner.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
 
<html>
 
<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
	<script type="text/javascript" src="JS/JS_Lanceur.js" ></script>
</head>
 
<body>
 
<div id="inlineDatepicker"></div>
 
<br>
 
<div name="titi" id="toto">
		 <!-- lier au calendrier les appel des onglets -->
		 <!-- lors du clonnage ajouter le lien de l'onglet au calendrier -->
   		 <p> <a href="#Partie_Basse_Div" name="liens"> DIV 1 </a></p>
   		 <p> <a href="#Partie_Basse_Div_2" name="liens"> DIV 2 </a></p>
   		 <p> <a href="#Partie_Basse_Div_3" name="liens"> DIV 3 </a></p>
	</div>	
 
<fieldset id="Partie_Basse_Fieldset">
<legend> DAILY TIMETABLE per request</legend>
 
<div name="MesLignes" id="Partie_Basse_Div">
	<table id="Partie_Basse_Table" border="2">
	<tbody>
		<tr align="center" id="Tab"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Line">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="CloneLine(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id="TDate"  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>										
		</tr>	
	</tbody>
	</table>
</div>	
<div></div>
</fieldset> 
 
<script type="text/javascript">
<!-- Tansfert de la valeur de la date à ...  ->
$(function() 
{
   $('#popupDatepicker').datepick();
 
   $('#inlineDatepicker').datepick(
    {
		onSelect:function(dateText)
		{
		document.getElementById("TDate").value =dateText;
		}
    });
});
 
function CloneLine(Line)
{
	newLine = Line.cloneNode(true); 
	Line.parentNode.insertBefore(newLine,Line)
	//Line.parentNode.appendChild(newLine);
}
 
var tbl=document.getElementById("Partie_Basse_Table")
var newTab = tbl.rows[0].cloneNode(true); 
var newTab2	= tbl.rows[1].cloneNode(true);
$('#inlineDatepicker').click
(
	function ()
	{	
		newTab=Tab.parentNode.appendChild(newTab)	
		Tab.parentNode.appendChild(newTab2)	
	}
);
 
<!-- Fonction Switch ->
$("a[name='liens']").click
	(
		function()
		{
		var target=$(this).attr('href');
			$("div[name='MesLignes']").hide();
			$(target).show();    
		}
	);
 
</script>
 
</body>
</html>

Comment je peut faire pour les switch de tableau a partir de clone et qu'il soit relier a leur date du calendrier?

(Et je ne sais pas pour quoi mais la fonction clone ne marche qu'une seul fois.)

Merci

**Enguerrand.P** · 07/04/2014, 10h04

Bonjour,
Cela marche très bien maintenant.

Voila le code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<html>
<head>
	<meta http-equiv="content-type" content="text/php; charset=ISO-8859-1" />
	<link rel="stylesheet" href="CSS/CSS_Daily_Timer.css"/>
	<link rel="stylesheet" href="CSS/Calendrier_CSS.css"/>
	<link rel="stylesheet" href="CSS/Calendar_Fixe_Design/jquery.datepick.css">
	<script type="text/javascript" src="JS/JS_JQuery_2_1_0.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick_Pluging.js"></script>
	<script type="text/javascript" src="JS/JS_JQuery_Datepick.js"></script>	
	<script type="text/javascript" src="JS/JS_Calendrier.js" ></script>
</head>
 
<body>
 
<div id="inlineDatepicker"></div>
 <input type="date" id="DATE1" Value='date' Size="9"></input>
 
<fieldset id="Partie_Basse_Fieldset">
<legend> DAILY TIMETABLE per request</legend>
 
<div name="MesLignes" id="Partie_Basse_Div">
	<table id="Table_Jour" border="2" name="MesTBL">
	<tbody>
		<tr align="center" id="Tab"> 
			<td bgcolor="#F0FFFF"></td>	
			<td bgcolor="#F0FFFF">Date</td>
			<td bgcolor="#F0FFFF">Request</td>
			<td bgcolor="#F0FFFF">Time(h)</td>
			<td bgcolor="#F0FFFF">Description</td>
			<td bgcolor="#F0FFFF">Worker</td>
		</tr>		
		<tr align="center" id="Line">
			<td>					
				<input type="button" name="NLine" id=""  size="3" value="New" 
					onclick="CloneLine(this.parentNode.parentNode);">
				</input>		
			</td>
			<td>					
				<input type="date" name="date" id="TDate"  size="9" value="" readonly="readonly"></input>		
			</td>
			<td>					
				<SELECT id="Select_Request" NAME="SRequest" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>
			<td>					
				<input type="text" name="time" id=""  size="5" value=""></input>		
			</td>			
			<td>					
				<textarea name="" id="TextArea_Description" rows="2" cols="30" value=""></textarea>			
			</td>
			<td>					
				<SELECT id="Table_Select_Worker" NAME="SWorker" onChange="saveValue(this)">
					<option value="*****************" selected="selected"></option>
					<option>*****************
				</SELECT>		
			</td>										
		</tr>	
	</tbody>
	</table>
</div>	
<div></div>
</fieldset> 
 
<script>
 
$(window).load(function()
{
        $("#Table_Jour").hide();
});
 
$(function() 
{
   $('#inlineDatepicker').datepick
   ({onSelect:
                function(dates)
                {
                var dateText = $.datepick.formatDate(dates[0]);
                        document.getElementById("DATE1").value =dateText;
                var dateArr = dateText.split("/");
                var IDfromDateText= dateArr[2] +  dateArr[0] + dateArr[1];       
                 
                        if ($("#myDivTable_Jour_"+IDfromDateText).length > 0)
                        {
                                // Il existe..donc j'affiche le tableau
                AffichDiv("Table_Jour_"+IDfromDateText);
                        }
                        else
                        {
                                // L'element n'existe pas.. je le crée ( clone)..
                CreaTable("Table_Jour_"+IDfromDateText); 
                // ...puis j'affiche le tableau
                AffichDiv("Table_Jour_"+IDfromDateText);               
                        }           
                }
   });
});
 
function AffichDiv(idTable)
{
    //On masque TOUS les tableaux
        $('div[name="MesTBL"]').hide(); 
    // On affiche celui que l'on a selectionné
        $('#myDiv'+ idTable).show();   
}
 
function CreaTable(idTable)
{
        $("#Table_Jour").show();
        //On clone le tableau d'origine
        //et je lui donne comme ID : "MonTableau_"+ IDfromDateText 
    $("#Partie_Basse_Div").append("<div name='MesTBL' id='myDiv" + idTable + "'></div>")
        $("#Table_Jour").clone().appendTo("#myDiv" + idTable)  
        $("#Table_Jour").hide();
}
 
function CloneLine(Line)
{
        newLine = Line.cloneNode(true); 
        Line.parentNode.insertBefore(newLine,Line)
        //Line.parentNode.appendChild(newLine);
}
 
</script>
</body>
</html>

Gestion par calendrier des fiches journalières du planning

JavaScript

Vue hybride

Discussions similaires

Partager

Partager