javascript and php on the fly calendar

Question

I have the code for a javascript calendar and it works perfectly as it creates it when the page loads. However I was wondering if it's possible to add events to it. I found a plugin (jQuery) that enables the user to hover over a td with class "event" and an event will be displayed. So since this calendar will not be used by me but by someone else who knows nothing about developing I was wondering if there is a way to make a php file or upload or something so she can upload the event. I mean, let's say she wants an event on the 3rd then she uploads a file php reads it and tells javascript to add the class "event" that date and jQuery does the rest. Is it possible? I can't even figure out how to do it and I really hope I explained myself. Here's my javascript btw.

function buildCal(){
    var d = new Date();
    var month = d.getMonth()+1;
    var year = d.getFullYear();
    var monthName=['Enero','Febrero','Marzo','Abril','Mayo','Junio','Julio','Agosto','Septiembre','Octubre','Noviembre','Diciembre'];
    var daysInMonth=[31,0,31,30,31,30,31,31,30,31,30,31];

    var objectDay = new Date(year, month-1, 1); //fix date bug when current day is 31st
    objectDay.od=objectDay.getDay()+1; //fix date bug when current day is 31st

    var todaydate=new Date() 
    var scanfortoday=(year==todaydate.getFullYear() && month==todaydate.getMonth()+1)? todaydate.getDate() : 0 //DD added

    daysInMonth[1]=(((objectDay.getFullYear()%100!=0)&&(objectDay.getFullYear()%4==0))||(objectDay.getFullYear()%400==0))?29:28;

    var t='<div class="main"><table class="main" cols="7" cellpadding="0" border="0" cellspacing="0">';
    t+='<h3 class="monthCSS" align="center">'+monthName[month-1]+' - '+year+'</h3><tr align="center">';


    for(s=0;s<7;s++)t+='<td class="daysofweek">'+"DoLuMaMiJuViSa".substr(s*2,2)+'</td>';

    t+='</tr><tr align="center">';
    for(i=2;i<=42;i++){
        var x=((i-objectDay.od>=0)&&(i-objectDay.od<daysInMonth[month-1]))? i-objectDay.od+1 : '&nbsp;';
            if (x==scanfortoday)
                x='<td class="today">'+x+'</td>'
            t+='<td class="days">'+x+'</td>';
        if(((i)%7==0)&&(i<36))t+='</tr><tr align="center">';
    }
    return t+='</tr></table></div>';
}

Something else, as you can see here, it adds blankspaces until it gets to an actual date. I was trying to make it check if(x was not a number) then add a td class="padding" however to do this I was trying to use x.match(/[0-9]+/) but it didn't seem to work and it would also be the first time I try to use regex with javascript would anyone know why is that wrong? or how to actually check for it?

---

Edit

Something odd is happening with this script and I don't know why, I tried to change from

t+='<td class="days">'+x+'</td>';

to

t+='<td class="days' + x +'">'+x+'</td>';

this, so I could select each td, but when I do this a new td is generated which contains

<td id="days&lt;td class=" today="">1</td>

I have NO idea why this happens, I just know it is messing with the code because afterwards I get a "> printed (because of quotes mis-match caused by this new td...why is this happening?

Answer 1

The calendar systems I've created use a full php array of the month. so that you can iterate over it and for every corresponding blank day table cell there is a blank array for the day.

e.g.

$calendar_dates = array(
              [week_1] = array(
                     [sun] = Null
                     [mon] = NULL
                     [tue] = array(
                            [events] = array(
                                    event_id => 'event name'
                                    event_name => ''
                                    event_time => ''
                             )
                     [wed]
                     ...
                 )
              [week_1] => array()
              ...........
  )

I build the days array by just creating an array from the specified date and current week

then I hit the databse to get events in that range

then cycle through the events and attatch them to the calendar array.

works like charm.

To get it to work with javascript just have it echo some specific javascript in the head of the html file that control the opening and closing of the calendar days.

give you client a simple login page to input/edit events in a webform.

Answer 2

It sounds like you're wanting to push event data from the server to your webpage containing the calendar. While this is possible, it's difficult and generally not worth the effort. You would be better off building some AJAX into your calendar and polling the server for event updates every 5 or 10 minutes or so. This will introduce some delay between when new events are uploaded and when they display on the calendar, but will be much easier to develop.