I'm new on this forum, sorry if i'm not at the good place to post this.. and sorry for my english im french :)

So.. i need to developp à calendar with event associate on some day.. 

i make this with datePicker and look my calendar : 

i create some event ( 3 in total ) and the color on days 1, 2 and 3 are day with event ! and when i click on a day with an event, i display event info in specific div. All is ok, that work, BUT when i click on a day with element, my div with color for event disapear.. :/

Check my code :   

2. (function($) {
3.         $(document).ready(function() {
4. 
   
5.             var events = [
6.                 {
7.                     Title: "Événement 1",
8.                     Date: new Date("10/01/2016"),
9.                     Lieu: "Paris",
10.                     Extrait: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
11.                     Type: "Régionaux",
12.                     Day: "1"
13.                 },
14.                 {
15.                     Title: "Événement 2",
16.                     Date: new Date("10/02/2016"),
17.                     Lieu: "Toulouse",
18.                     Extrait: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
19.                     Type: "Divers",
20.                     Day: "2"
21.                 },
22.                 {
23.                     Title: "Événement 3",
24.                     Date: new Date("10/03/2016"),
25.                     Lieu: "Marseille",
26.                     Extrait: "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...",
27.                     Type: "Nationaux",
28.                     Day: "3"
29.                 }
30.             ];
31. 
    
32.             $("#cal_content").datepicker({
33.                 dayNamesMin: [ "Dim", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam" ],
34.                 monthNames: [ "Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre" ],
35.                 nextText: "Suivant",
36.                 prevText: "Précédent",
37.                 beforeShowDay: function(date) {
38.                     var result = [true, '', null];
39.                     var matching = $.grep(events, function(event) {
40.                         return event.Date.valueOf() === date.valueOf();
41.                     });
42. 
    
43.                     if (matching.length) {
44.                         result = [true, 'highlight', null];
45.                     }
46.                     return result;
47.                 },
48.                 onSelect: function(dateText) {
49.                     var date,
50.                         selectedDate = new Date(dateText),
51.                         i = 0,
52.                         event = null;
53. 
    
54.                     /* Determine if the user clicked an event: */
55.                     while (i < events.length && !event) {
56.                         date = events[i].Date;
57. 
    
58.                         if (selectedDate.valueOf() === date.valueOf()) {
59.                             //console.log('clicked');
60.                             event = events[i];
61.                         }else{
62.                             //console.log('no clicked');
63.                         }
64.                         i++;
65.                     }
66.                     if (event) {
67.                         /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
68.                         //alert(event.Title);
69.                         $('#cal_event_content').html(
70.                             '<div class="event type_'+event.Type+'">'
71.                                 +'<span class="title">'+event.Title+'</span>'
72.                                 +'<span class="lieu">'+event.Lieu+'</span>'
73.                                 +'<span class="content">'+event.Extrait+'</span>'
74.                             +'</div>'
75.                         );
76.                     }
77.                 }
78.             });
79. 
    
80.             $(".ui-datepicker-calendar .ui-state-default").each(function () {
81.                 //you can get the year using below code.
82.                 var year = $(".ui-datepicker-year").first().html();
83.                 var nb;
84.                 for (nb = 0; nb < events.length; ++nb) {
85.                     if ($(".ui-datepicker-month").first().html() == "Octobre" && $(this).html() == events[nb].Day) {
86.                         //add custome text to date cell
87.                         //$(this).parent().attr('data-type',"Nationaux");
88.                         var type = events[nb].Type;
89.                         $(this).after('<div class="puce_color '+type+'"></div>');
90.                     }
91.                 }
92.             });
93. 
    
94.         });
95.     })( jQuery );

On line 80, this is what i use to insert "puce_color" with good event type to add the small color on the good day.. 

But i don't know how to keep my "puce_color" after click a event day.. 

Can someone help me please ? Did am i on the good way ?

Thanks for help :)