JQuery Week Calendar PHP Integration

288 views
Skip to first unread message

sayrus

unread,
Aug 12, 2009, 3:25:23 AM8/12/09
to jquery week calendar
Hello,

I would like to integrate this awesome calendar with PHP to load,
save, edit and delete events.

How can I do it? Any examples? Source code?

Thank you very much!

Pimmetje

unread,
Aug 12, 2009, 6:09:38 AM8/12/09
to jquery week calendar
Hi,

As i had too much time i already done most of this for my own fun. ;)
You can view and play with it here.
http://project.parko.org/weekcalendar/

Let me know what you think of it.
I used mysql & php with http://adodb.sourceforge.net/ so it is easy
changeable.
You can play around with it please note i made a reset function on
this one every 24h.

I do not think the code is very safe so i will not release it at this
point. But i intend to do it. (I hope someone can help me to test
security)

Kind regards,

Pimmetje

sayrus

unread,
Aug 12, 2009, 9:25:15 AM8/12/09
to jquery week calendar
Hi,

I integrated the calendar with PHP/MySQL this morning too.

No so difficult at the end.

I can upload my datebase using the following code into each correct
event (eventNew, eventDrop, eventResize, eventClick, ...) :

$.ajax({
type:"GET",
url:"update.php",
data:'&id='+calEvent.id+'&start='+calEvent.start+'&end='+calEvent.end
+'&body='+calEvent.body+'&title='+calEvent.title});

},


However, I'd like to customize this calendar by adding new fields
like selectboxes.

How to update an event having the correct value selected into the
selectbox?

Ex : If I create an event with this selectbox:

<select id="object" name="object">
<option value="">select an object</option>
<option value="fork">fork</option>
<option value="knife">knife</option>
<option value="spoon">spoon</option>
<option value="plate">plate</option>
</select>

For example, if I choose the "spoon", I'd like to see the "spoon"
selected in the form when I update my event.

How can I do this?

Thanks a lot!

Sayrus

On 12 août, 12:09, Pimmetje <pimme...@gmail.com> wrote:
> Hi,
>
> As i had too much time i already done most of this for my own fun. ;)
> You can view and play with it here.http://project.parko.org/weekcalendar/
>
> Let me know what you think of it.
> I used mysql & php withhttp://adodb.sourceforge.net/so it is easy

sayrus

unread,
Aug 12, 2009, 10:47:00 AM8/12/09
to jquery week calendar
Sorry I did a mistake...

Working using the $dialogContent.find("select[name='prof']").val
(calEvent.prof);

Nice!
> > I used mysql & php withhttp://adodb.sourceforge.net/soit is easy

AnneKore

unread,
Aug 24, 2009, 8:11:18 AM8/24/09
to jquery week calendar
Hi,

I'm a beginner in JS dev and I would like to integrate JQuerey Week
Calendar with PHP too. Dut to my weak knowledge in JS, it's a
failure :D.

So, Sayrus I suppose the code is modified in demo.js ? And if Sayrus
or Pimmetje could post the code or directly the file of their
processing PHP file.

Regards.

PS : @ the author of JQuery Week Calendar : Very good script !!!


I would like to integrate this awesome calendar with PHP to load,
save, edit and delete events.
How can I do it? Any examples? Source code?
Thank you very much!

> > > I used mysql & php withhttp://adodb.sourceforge.net/soitis easy

Pimmetje

unread,
Aug 28, 2009, 12:25:41 PM8/28/09
to jquery week calendar
Hi,

As u can see there http://project.parko.org/weekcalendar/ u can use
the dropdown in the opper left corner to select a calendar. U can take
a look at the HTML code as the most imported part is visible there. U
can read the dropdown and send the information along with the refresh
of our calendar fetching the correct appointments. (This is the way i
should do it). This solution is for a part serverside.

Good luck with your implementation.

Kind regards,

Pimmetje

AnneKore

unread,
Sep 5, 2009, 1:04:25 PM9/5/09
to jquery week calendar
Hi,

Very big thanks for your help, I successed to integrate PHP/MySQL !

But I have a small problem with the return of start and end date in
the variables. I have mixed the code of Pimmetje and original code of
Rob for display the dates in a select input form.

The code of interpretation of datas between JS and PHP is :

var editsaverun = false;
function editsave() {
if(!editsaverun) {
editsaverun = true;
/*Read the vars */
var id = $("#id").val();
var end = $("#event_edit_container").find("select
[name='end']").val();
var start = g$("#event_edit_container").find("select
[name='end']").val();
var title = $("#event_edit_container").find("input
[name='title']").val();
var message = $("#event_edit_container").find("input
[name='message']").val();
$.get("serverappli.php",
{
action: "edit",
start: start,
id : id,
end: end,
name: title,
message: message
},
function(json){
$('#calendar').weekCalendar("updateEvent", json);
}, 'json');
editsaverun = false;
}
}

So, I don't manage to recept the dates in good format for stocking in
my DB.

I have "Fri+Sep+04+2009+11%3A00%3A00+GMT%2B0200+(CEST)" and I would
like "2009-08-31T10:00:00+00:00"

For information the code of my EventClick part is :

eventClick : function(calEvent, $event) {
$.get("popup.php", {
page : "edit",
id : calEvent.id,
id_owner : <?php echo $owner; ?>
}, function(data){
$("#event_edit_container").append(data);
var $dialogContent = $("#event_edit_container");
resetForm($dialogContent);
var startField = $dialogContent.find("select
[name='start']").val(calEvent.start);
var endField = $dialogContent.find("select
[name='end']").val(calEvent.end);
var titleField = $dialogContent.find("input
[name='title']").val(calEvent.title);
var messageField = $dialogContent.find("input
[name='message']").val(calEvent.message);
var idField = $dialogContent.find("input[name='id']").val
(calEvent.id);
$dialogContent.find(".date_holder").text
($calendar.weekCalendar("formatDate", calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent,
$calendar.weekCalendar("getTimeslotTimes",
calEvent.start));
});


$("#event_edit_container").dialog({
modal: true,
title: "Edition du RDV de " + calEvent.title,
height: 500,
width:500,
close: function() {
$("#event_edit_container").dialog("destroy");
$("#event_edit_container").hide();
$("#event_edit_container").empty();
$calendar.weekCalendar("removeUnsavedEvents");
},
buttons: {
save : function(){

editsave();
$("#event_edit_container").dialog("close");
},
"supprimer" : function() {
deleteappointment();
$("#event_edit_container").dialog("close");
},
cancel : function(){
$("#event_edit_container").dialog("close");
}
}
}).show();
$(window).resize(); //fixes a bug in modal overlay size ??
},

Somebody have an idea for my problem ? I have think to do a function
for convert it in the function editsave() but it's loud on code
no :s ?

Regards.
Aurelien ;)

On 28 août, 18:25, Pimmetje <pimme...@gmail.com> wrote:
> Hi,
>
> As u can see therehttp://project.parko.org/weekcalendar/u can use

Pimmetje

unread,
Sep 5, 2009, 1:59:15 PM9/5/09
to jquery week calendar
Hi,

Storing dates is a problem i have myself. And as i only program it for
fun i did not spend too much time trying to find the problem. The part
where it probably went wrong is. I wanted to store all date in UTC.
This way everyone would have local formated dates. So there is
somewhere a mistake

I send date.getTime() to the server. In that way for me it was easy to
store you still have to divide it to 1000.

As the calendar would not accept it as input for me i do this to
generate the json
gmdate(DATE_ATOM,$date/1000);

Hope it helps

Pimmetje
> > As u can see therehttp://project.parko.org/weekcalendar/ucan use

AnneKore

unread,
Sep 5, 2009, 2:10:48 PM9/5/09
to jquery week calendar
Right it's a solution but I need to extract the date in other part of
my website and I would like use "standard" ISO format for more
compatibility with my future scripts. Also I think of utilise my
further idea : use a function to convert the date before sending the
variable to my PHP script. It's loud but I think I don't have other
choice.

Thanks for your help and your availability Pimmetje ;)

Regards,
Aurelien
Reply all
Reply to author
Forward
0 new messages