How to dynamically disable day in responsive calendar (w3 widgets)?

Question

Situation: Some companies' weekends are Saturdays and Sundays or Fridays and Saturdays. So the calendar should be able to disable those day dynamically as following.

I have some basic idea of how to do it with javascript:

// determine weekends
    if(dayType === 'fri' || dayType === 'sat') {
          day.append($("<a class='disabled'>" + dayNum + "</a>").attr("data-day", dayNum).attr("data-month", monthNum).attr("data-year", yearNum));
      }else {
          day.append($("<a>" + dayNum + "</a>").attr("data-day", dayNum).attr("data-month", monthNum).attr("data-year", yearNum));
      }

How to make it dynamic and based on companies' weekends after getting data from database using php?

score 1 · Accepted Answer · answered Feb 23 '16 at 18:29

1

if your javaScript does it, all you have to do is retrieve the information from the database and call a function that disable the days, the query to the database will depend on how it's designed, but you could create a table weekendDays and use the company name as search key (better an id), that way you could do a select days from weekenDays where name='Canonical'; days could be a string with comma separators... days = {"fri,sat"}, then you split the result and call disableDays sending the split text as parameter.

function disableDays(dayToDisable){
         // determine weekends
     for(idx=0; idx<dayToDisable.length; idx++){
       if(dayType === dayToDisable[idx]) {
           day.append($("<a class='disabled'>" + dayNum + "</a>").attr("data-day", dayNum).attr("data-month", monthNum).attr("data-year", yearNum));
       }
       else {
             day.append($("<a>" + dayNum + "</a>").attr("data-day", dayNum).attr("data-month", monthNum).attr("data-year", yearNum));
       }
   }
}

You have to call the function with each result the query to the database returns (the weekends)

well something like that, please check the code I write it as an example and didn't test it, there could be better ways to do it :)

answered Feb 23 '16 at 18:29

DIEGO CARRASCAL

1,999
14
16

thanks for the reply. I totally get the idea of how to do it. But the code above is written in js file. Is there a way i can get the data from a php file and use them in the js file? – Wilz5363 Feb 23 '16 at 18:37
ok then you need to use AJAX like is splained here: [link AJAX - Call php function from javascript](http://stackoverflow.com/questions/7165395/call-php-function-from-javascript) – DIEGO CARRASCAL Feb 23 '16 at 19:05
you must call your php like this: `$.ajax({ url:'yourPHPscript.php', complete: function (response) { disableDays(response.split(",")); }, error: function () { alert("Error!"); } }); }` – DIEGO CARRASCAL Feb 23 '16 at 19:30
@DIEGO CARRASCAL I see your excelent response. It help me too much. Please, I need also know the month and year when the user click on next /prev link or into event onMonthChange. The values data['year] and data['month'] don´t work there. Somehelp will be appreciate. – Luiz Alves Jan 04 '17 at 00:14
I suggest you to create a new question with your code, because the answer I give to this question was based on my analysis of the code and not in previous experience with it... Sorry I can't help more, but if you do create a question with your code I'll try to help you :) – DIEGO CARRASCAL Jan 04 '17 at 14:53

Marcelo Santos · Answer 2 · 2017-01-18T02:03:50.043

-1

I figured something out: using CSS. Every 'div' for the days has got classes (wed past or sun future). So we have to just specify CSS for them. It's not related to OP but it's just for record.

edited Jan 18 '17 at 02:03

answered Jan 18 '17 at 01:11

Marcelo Santos

128
1
4

How to dynamically disable day in responsive calendar (w3 widgets)?

2 Answers2