Cases en couleur dans calendrier

Par sarahgysler, il y a 9 ans

Javascript

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Décrivez ici votre code ou ce que vous cherchez à faire

eventRender: function(event, element, view){ console.log(view); var html = event.day; var html_class = "none"; if(typeof event.date_end != 'undefined'){ html += ' - '+event.date_end; html_class = "group"; } var today_y_m_d = new Date().getFullYear() +"-"+(new Date().getMonth()+1)+"-"+new Date().getDate(); var month = self.calendar.fullCalendar('getDate').format("MM"); var month_now = $.fullCalendar.moment(event.start._i).format("MM"); var _class = ''; if(month_now != month){ _class = 'next_month'; } if(event.status == 'available'){ var title =""; if ( hide_adult != 'on'){title += st_checkout_text.adult_price+': '+event.adult_price + " <br/>"; } if ( hide_children != 'on') {title += st_checkout_text.child_price+': '+event.child_price + " <br/>"; } if ( hide_infant != 'on') {title += st_checkout_text.infant_price+': '+event.infant_price ; } html = "<button data-placement='top' title = '"+title+"' data-toggle='tooltip' class='"+html_class+" "+_class+" btn btn-available'>" + html; }else { html = "<button disabled data-placement='top' title = 'Disabled' data-toggle='tooltip' class='"+html_class+" btn btn-disabled'>" + html; } if (today_y_m_d === event.date) { html += "<span class='triangle'></span>"; } html += "</button>"; element.addClass('event-'+event.id) element.addClass('event-number-'+event.start.unix()); $('.fc-content', element).html(html); element.bind('click', function(calEvent, jsEvent, view) { if (!$(this).find("button").hasClass('btn-available')) return ; $('.fc-day-grid-event').removeClass('st-active'); $(this).addClass('st-active'); date = $.fullCalendar.moment(event.start._i).format(st_params.date_format.toUpperCase()); $('input#check_in').val(date).parent().show(); if(typeof event.end != 'undefined' && event.end && typeof event.end._i != 'undefined'){ date = new Date(event.end._i); date.setDate(date.getDate() - 1); date = $.fullCalendar.moment(date).format(st_params.date_format.toUpperCase()); $('input#check_out').val(date).parent().show(); }else{ date = $.fullCalendar.moment(event.start._i).format(st_params.date_format.toUpperCase()); $('input#check_out').val(date).parent().hide(); } $('input#adult_price').val(event.adult_price); $('input#child_price').val(event.child_price); $('input#infant_price').val(event.infant_price); }); }, eventAfterRender: function( event, element, view ) { $('[data-toggle="tooltip"]').tooltip({html:true}); }, loading: function(isLoading, view){ if(isLoading){ $('.calendar-wrapper-inner .overlay-form').fadeIn(); }else{ $('.calendar-wrapper-inner .overlay-form').fadeOut(); } }, }); } }; if($('#select-a-activity').length <= 0){ $('.calendar-wrapper').each(function(index, el) { var t = $(this); var activity = new ActivityCalendar(t); activity.init(); }); } if($('#select-a-activity').length){ if($('#select-a-activity').length){ $('#select-a-activity').qtip({ content: { text: $('#list_activity_item').html() }, show: { when: 'click', solo: true // Only show one tooltip at a time }, hide: 'unfocus', api :{ onShow : function(){ $('.calendar-wrapper').each(function(index, el) { var t = $(this); var activity = new ActivityCalendar(t); activity.init(); }); } } }); } } });

Ce que je veux

J'aimerais pouvoir obtenir des couleurs pour mes cases dans le calendrier. Cases dispo en vert et case réservées en rouge.

Ce que j'obtiens

Actuellement toutes les cases sont grises et je ne trouve pas où je pourrais les changer ou quelle ligne de code ajouter...

2 réponses

Lartak, il y a 9 ans

Bonsoir.
Pourrais-tu nous fournir plus de précisions ?
Car étant donné que tu ne nous donne que deux lignes entre ceux que tu veux et ce que tu obtiens, et que le code javascript ne contient aucun commentaire, nous allons avoir du mal à cerner la situation, surtout que tu nous parle de calendrier, mais nous ne savons pas par exemple si tu utilises une ressource externe (si oui laquelle) ou pas.
Tu nous demande de l'aide, mais tu ne nous donnes pas suffisamment de renseignement.

sarahgysler, il y a 9 ans

Excuses moi Lartak, j'avoue ne pas trop savoir quelle information donner. Je suis actuellement en train de travailler sur un site de location de voiture via Wordpress et je rencontre des problèmes avec mon calendrier. J'utilise le theme "traveler" http://themeforest.net/item/traveler-traveltourbooking-wordpress-theme/full_screen_preview/10822683 où un calendrier est déjà intégré et j'aimerais juste pouvoir changer les couleurs. Du coup j'ai contacté le créateur du thème en lui expliquant ma problèmatique et il m'a répondu :

The editing is not easy if you are not a programmer. You should hire a programmer let them help you
I can only tell you the file to fix

  1. You can go to...js/init folder and find single-activity.js, single-hotel-room.js, single-tour.js, single-rental.js file
  2. Find line 'eventRender: function(event, element, view)'. You can custom in this function
  3. Then custom color

Du coup je me suis mise à la recherche d'un programmeur que je pourrais rémunérer quelques dizaines d'euros pour le coup de main mais je n'ai pas encore trouver. Je me suis donc tournée sur les forums spécialisés et j'ai copié les lignes de codes à la ligne que le créateur du thème m'a indiqué.