Bonjour à tous,


J'ai un soucis dans mon datepicker.

la propriété "BeforeShowDay" me permet d'afficher des événements issus d'une BDD avec notamment un style CSS propre via
Code : Sélectionner tout - Visualiser dans une fenêtre à part
events = [true,'isActived']
Cela fonctionne très bien ... sur PC car sur un mobile c'est problématique et voici pourquoi.

mon CSS me colorie les événements et empêche de cliquer dessus via ces propriétés:
Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
.isActived a.ui-state-default{
	background:url(../icons/fm.png);
	background-repeat:repeat-x;
	background-color:#f6f6f6;
	cursor: not-allowed;
}

oui mais sur un écran tactile, le "cursor: not-allowed" ne sert à rien car l'on peut tout de même cliquer sur l'événement.

Je ne peux pas utiliser cette version
Code : Sélectionner tout - Visualiser dans une fenêtre à part
events = [false,'']
Comment puis-je faire dans ce cas ?

Merci pour votre aide

voici mon code :
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
127
128
129
130
131
132
<script>
  var activeDays = <?php echo json_encode($activeDays); ?>;
  //var activeDays = ["7-6-2018", "7-7-2018", "7-8-2018", "7-12-2018", "7-13-2018", "7-14-2018"]; 
  var arrival = <?php echo json_encode($arrayArrival); ?>;
  //var arrival = ["7-6-2018", "7-12-2018"];
  var departure = <?php echo json_encode($arrayDeparture); ?>;
 //var departure = ["2018-10-18", "2018-10-11"];
 
 
 
  $( function() {
    var dateFormat = "dd/mm/yy",
      from = $( "#from" )
        .datepicker({
		  firstDay: 1,	
          dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
		  monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre" ],
		  monthNamesShort: [ "Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Aout", "Sep", "Oct", "Nov", "Déc" ],
		  dateFormat : "dd/mm/yy",
          changeMonth: true,
          numberOfMonths: 3,
		  beforeShowDay: function(date) {
            var events = [true,''];
            var m = date.getMonth();
			var d = date.getDate();
			var y = date.getFullYear();
			var currentdate = y + '-' + (m+1) + '-' + d ;
            var n = [];
            departure.forEach(function(item){
  		    n.push((new Date(item)).getDay());
	        });
 
 
			if ( activeDays.indexOf(currentdate)  > -1)  
            {
                events = [true,'isActived'];
			}
 
			if ( arrival.indexOf(currentdate)  > -1) 
			{
                events = [true,'isActivedArrival'];
			}
			if ( departure.indexOf(currentdate)  > -1) 
			{
                events = [true,'isActivedDeparture'];
			}
            if (departure.indexOf(currentdate)  > -1 && n.indexOf(0) > -1)
			{
				events = [true, 'isActivedDepartureSun'];
			}
 
			if ( arrival.indexOf(currentdate) > -1 && departure.indexOf(currentdate) >-1) 
			{
                events = [true,'isActivedEqual'];
			}
 
 
 
            return events;
        }
 
 
 
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
		firstDay: 1,  
        dayNamesMin: [ "Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa" ],
		  monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Aout", "Septembre", "Octobre", "Novembre", "Decembre" ],
		  monthNamesShort: [ "Jan", "Fév", "Mar", "Avr", "Mai", "Juin", "Juil", "Aout", "Sep", "Oct", "Nov", "Déc" ],
		dateFormat : "dd/mm/yy",
        changeMonth: true,
        numberOfMonths: 3,
		beforeShowDay: function(date) {
            var events = [true,''];
            var m = date.getMonth();
			var d = date.getDate();
			var y = date.getFullYear();
			var currentdate = y + '-' + (m+1) + '-' + d ;
            var n = [];
            departure.forEach(function(item){
  		    n.push((new Date(item)).getDay());
	        });
 
			//var sun = getDay(currentdate);		
 
			if ( activeDays.indexOf(currentdate)  > -1)  
            {
                events = [true,'isActived'];
			}
 
			if ( arrival.indexOf(currentdate)  > -1) 
			{
                events = [true,'isActivedArrival'];
			}
			if ( departure.indexOf(currentdate)  > -1) 
			{
                events = [true,'isActivedDeparture'];
			}
            if (departure.indexOf(currentdate)  > -1 && n.indexOf(0) > -1)
			{
				events = [true, 'isActivedDepartureSun'];
			}
 
			if ( arrival.indexOf(currentdate) > -1 && departure.indexOf(currentdate) >-1) 
			{
                events = [true,'isActivedEqual'];
			}
 
            return events;
        }
 
 
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });
 
    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }
 
      return date;
    }
  } );
  </script>