Save events to mysql database desperate help???

[Scott]

I am in no shape a web guru and i need some help. I was able to
figure out through this group how to display events from a database
but i really need detailed instructions on how to save the events that
users submit to the database. I aint to proud to beg and would gladly
drop a donation to the creator and anyone who could help me with this
because i am really just a noob at php and mysql and couldnt get this
type of functionality with my limited skills.

[Doomsday Conspiracy]

Hey, Scott calm down. We're here to help you.

The most convenient way to insert values into database is by using a
Web Service. Web services can be called through javascript/jquery
code. Inside your web service, you can write the logic to insert
values into db. Please make sure that values in your DB map exactly to
values from the events.

I can help you with ASP .Net but not in PHP. However, try to use web
services.

[Scott]

Here is my failed attempt to send a new event to php:

$(document).ready(function() {


var $calendar = $('#calendar');
var id = 10;

$calendar.weekCalendar({
displayOddEven:true,
timeslotsPerHour : 4,
allowCalEventOverlap : true,
overlapEventsSeparate: true,
firstDayOfWeek : 1,
businessHours :{start: 8, end: 18, limitDisplay: true },
daysToShow : 7,
switchDisplay: {'1 day': 1, '3 next days': 3, 'work week': 5,
'full week': 7},
title: function(daysToShow) {
return daysToShow == 1 ? '%date%' : '%start% - %end%';
},
height : function($calendar) {
return $(window).height() - $("h1").outerHeight() - 1;
},
eventRender : function(calEvent, $event) {
if (calEvent.end.getTime() < new Date().getTime()) {
$event.css("backgroundColor", "#aaa");
$event.find(".wc-time").css({
"backgroundColor" : "#999",
"border" : "1px solid #888"
});
}
},
draggable : function(calEvent, $event) {
return calEvent.readOnly != true;
},
resizable : function(calEvent, $event) {
return calEvent.readOnly != true;
},
eventNew : function(calEvent, $event) {
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']");
var bodyField = $dialogContent.find("textarea[name='body']");


$dialogContent.dialog({
modal: true,
title: "New Calendar Event",
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
save : function() {
var $this=$(this);
$.getJSON('./addevent.php?action=save&id=0&start='
+startField.getTime()/1000+'&end='+endField.getTime()/
1000'&title='+titleField'&body='+bodyField,
{
},
function(ret){
$this.dialog('close');
$('#calendar_wrapper').weekCalendar('refresh');
$("#event_edit_container");remove();
}
);


//calEvent.id = id;
//id++;
//calEvent.start = new Date(startField.val());
//calEvent.end = new Date(endField.val());
//calEvent.title = titleField.val();
//calEvent.body = bodyField.val();

//$calendar.weekCalendar("removeUnsavedEvents");
//$calendar.weekCalendar("updateEvent", calEvent);
//$dialogContent.dialog("close");
},
cancel : function() {
$dialogContent.dialog("close");
}
}
}).show();


$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate",
calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent,
$calendar.weekCalendar("getTimeslotTimes", calEvent.start));

},
eventDrop : function(calEvent, $event) {

},
eventResize : function(calEvent, $event) {
},
eventClick : function(calEvent, $event) {

if (calEvent.readOnly) {
return;
}

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 bodyField = $dialogContent.find("textarea[name='body']");
bodyField.val(calEvent.body);

$dialogContent.dialog({
modal: true,
title: "Edit - " + calEvent.title,
close: function() {
$dialogContent.dialog("destroy");
$dialogContent.hide();
$('#calendar').weekCalendar("removeUnsavedEvents");
},
buttons: {
save : function() {

calEvent.start = new Date(startField.val());
calEvent.end = new Date(endField.val());
calEvent.title = titleField.val();
calEvent.body = bodyField.val();

$calendar.weekCalendar("updateEvent", calEvent);
$dialogContent.dialog("close");
},
"delete" : function() {
$calendar.weekCalendar("removeEvent", calEvent.id);
$dialogContent.dialog("close");
},
cancel : function() {
$dialogContent.dialog("close");
}
}
}).show();

var startField =
$dialogContent.find("select[name='start']").val(calEvent.start);
var endField =
$dialogContent.find("select[name='end']").val(calEvent.end);

$dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate",
calEvent.start));
setupStartAndEndTimeFields(startField, endField, calEvent,
$calendar.weekCalendar("getTimeslotTimes", calEvent.start));
$(window).resize().resize(); //fixes a bug in modal overlay
size ??

},
eventMouseover : function(calEvent, $event) {
},
eventMouseout : function(calEvent, $event) {
},
noEvents : function() {

},
data: function(start, end, callback) {
$.getJSON("events.php", {
start: start.getTime(),
end: end.getTime()},
function(result) {
if (result != null) {
for (i in result) {
var calEvent =
result[i];
calEvent.userId =
parseInt(calEvent.userId);
}
}
var calevents = result;
callback(calevents);
});
}

});

function resetForm($dialogContent) {
$dialogContent.find("input").val("");
$dialogContent.find("textarea").val("");
}

function getEventData() {
var year = new Date().getFullYear();
var month = new Date().getMonth();
var day = new Date().getDate();

return {
events : [
{
"id":1,
"start": new Date(year, month, day, 12),
"end": new Date(year, month, day, 13, 30),
"title":"Lunch with Mike"
},
{
"id":2,
"start": new Date(year, month, day, 14),
"end": new Date(year, month, day, 14, 45),
"title":"Dev Meeting"
},
{
"id":3,
"start": new Date(year, month, day + 1, 17),
"end": new Date(year, month, day + 1, 17, 45),
"title":"Hair cut"
},
{
"id":4,
"start": new Date(year, month, day - 1, 8),
"end": new Date(year, month, day - 1, 9, 30),
"title":"Team breakfast"
},
{
"id":5,
"start": new Date(year, month, day + 1, 14),
"end": new Date(year, month, day + 1, 15),
"title":"Product showcase"
},
{
"id":6,
"start": new Date(year, month, day, 10),
"end": new Date(year, month, day, 11),
"title":"I'm read-only",
readOnly : true
},
{
"id":7,
"start": new Date(year, month, day + 2, 17),
"end": new Date(year, month, day + 3, 9),
"title":"Multiday"
}
]
};
}


/*
* Sets up the start and end time fields in the calendar event
* form for editing based on the calendar event being edited
*/
function setupStartAndEndTimeFields($startTimeField, $endTimeField,
calEvent, timeslotTimes) {

$startTimeField.empty();
$endTimeField.empty();

for (var i = 0; i < timeslotTimes.length; i++) {
var startTime = timeslotTimes[i].start;
var endTime = timeslotTimes[i].end;
var startSelected = "";
if (startTime.getTime() === calEvent.start.getTime()) {
startSelected = "selected=\"selected\"";
}
var endSelected = "";
if (endTime.getTime() === calEvent.end.getTime()) {
endSelected = "selected=\"selected\"";
}
$startTimeField.append("<option value=\"" + startTime + "\" "
+ startSelected + ">" + timeslotTimes[i].startFormatted + "</
option>");
$endTimeField.append("<option value=\"" + endTime + "\" " +
endSelected + ">" + timeslotTimes[i].endFormatted + "</option>");

$timestampsOfOptions.start[timeslotTimes[i].startFormatted] =
startTime.getTime();
$timestampsOfOptions.end[timeslotTimes[i].endFormatted] =
endTime.getTime();

}
$endTimeOptions = $endTimeField.find("option");
$startTimeField.trigger("change");
}

var $endTimeField = $("select[name='end']");
var $endTimeOptions = $endTimeField.find("option");
var $timestampsOfOptions = {start:[],end:[]};

//reduces the end time options to be only after the start time
options.
$("select[name='start']").change(function() {
var startTime = $timestampsOfOptions.start[$
(this).find(":selected").text()];
var currentEndTime =
$endTimeField.find("option:selected").val();
$endTimeField.html(
$endTimeOptions.filter(function() {
return startTime < $timestampsOfOptions.end[$
(this).text()];
})
);

var endTimeSelected = false;
$endTimeField.find("option").each(function() {
if ($(this).val() === currentEndTime) {
$(this).attr("selected", "selected");
endTimeSelected = true;
return false;
}
});

if (!endTimeSelected) {
//automatically select an end date 2 slots away.
$endTimeField.find("option:eq(1)").attr("selected",
"selected");
}

});


var $about = $("#about");

$("#about_button").click(function() {
$about.dialog({
title: "About this calendar demo",
width: 600,
close: function() {
$about.dialog("destroy");
$about.hide();
},
buttons: {
close : function() {
$about.dialog("close");
}
}
}).show();
});


});

[Nelson Benítez León]

Hi Scott, I've pasted example of how I save to mysql from jquery week
calendar in one of my project.. these are the files:

http://pastebin.com/gV7MHhiR (html page that holds the jquery week calendar)
http://pastebin.com/DdKuwMha (calendar.php file that receives ajax
calls from jqueryweekcalendar to view/insert/update/delete events from
mysql )

Hope you can understand and adapt above code for your project..

regards,

2011/3/18 Scott <mscot...@gmail.com>:

[Strix Nebulosa]

You might want to consider a CMS (Content Management System), something
like Wordpress, Joomla, Drupal, etc... Then see if someone has a plugin
or module for weekcalendar or if someone might be willing to write one.
Doing it from scratch with no framework is very dangerous if you don't
know what you're doing.

[sourav sarkar]

Hey Scott find this piece of code in demo.js file

 buttons: {

               save : function() {

//then use ajax for inserting into the database within this block of code

$.ajax({

  type: "POST",

  url: "",

  data: ,

  success: function(msg){

 //do something

  }

 });

I have done the same by using this trick.

Cheers!

Sourav Sarkar

[David Finley]

Where exactly do I enter this to save?  I'm trying to make this calendar save using godaddy linux hosting... I am a real noob, I have all the calendar edited to my liking all except the save function, I dont know anything about doing it. Any help would really be appreciated.

[Austin Roberts]

How are you trying to save the calendar events? Using a dialog or using drag and drop or both? Basically you can use the Ajax call to send the start date, end date, ID (if your editing an existing event), and title data to your server side script (asp, ColdFusion, php). Your server side script will perform the actual save to the database using SQL statements. You can then use the success callback of the Ajax request to refresh the calendar. Have you chosen a server side language and is the server set up to run that language?

[David Finley]

Im totally a noob when it comes to this, I have godaddy linux hosting and I have the calendar script and webpage all setup to my likings, just need to get it to save.

[Jorge Marquez Rave]

If you use what sourav told you it will work. Use Jquery Ajax try some JSON and also try some GET events

A free man is someone who is true to himself. Who follows his dreams and turns them into reallity 

[David Finley]

I dont know how to do Jquery Ajax on godaddy.. but I can install mysql database... is there a version of this calendar with sql integrated in it?

[Jorge Marquez Rave]

David,

You are missunderstanding things, Godaddy is just a host, domain and other internet services supplier, this calendar is a Jquery/Javascript code, which it needs to be installed from source code into your html code, if you want mysql it needs PHP or another programming language to build your connection parameters.

A free man is someone who is true to himself. Who follows his dreams and turns them into reallity 

[David Finley]

Jquery is already with the calendar demo... so can I use that? 

 

He said to find the following in demo.js and put the ajax code... do I put it after the { or in between () in function.. or? 

 

buttons: {

save : function() {

 

Sorry about all the stupid questions, I do plan on learning all of this, but need to get this calendar working so I can have some free time so I can learn and read. I have all of it done but the saving part.

[Austin Roberts]

David,

 Jorge is correct.  Unfortunately sending, saving, and retrieving data from a database takes a little understanding to accomplish and before anyone can help you they will need some information from you.  In an attempt to help you grasp the basic requirements see the attached graphic to understand the flow of data and basic requirements in order to get a fully functioning calendar.

First thing you need to do is create a mysql database(or other type of database) with columns for: unique event ID, start date, end date, title.

Second thing you will need to do is pick a server side language.  The server side page(s) will perform the actual save to the mysql database and will also query the database and return the data to the webpage to load into the calendar. This can be done by formatting the results from the query into the JSON format. PHP is pretty popular with mysql databases.

Next you need to decide how you want your users to interact with the calendar.  The plugin supports drag and drop and resizing existing events to edit them.  You can also load a form into a jQuery dialog to create a new event.  There is an example of this in the full demo.  That would be a good starting point.

Next you need to send and retrieve the data from the webpage to your server side script.  This can be done using Ajax. Here are some examples:
eventResize: function(calEvent, $event) {
                      $.ajax({url:"youServerSidePage.php", data:{eventID: calEvent.id, start: calEvent.start, end:calEvent.end, title:calEvent.title}, success: function(){$("div#messageCal").empty().html("Successfully saved the reservation!").slideDown("normal", function(){window.setTimeout(function(){$("div#messageCal").slideUp('normal');}, 2000)}).position({of:"body"});$calendar.weekCalendar("refresh");}, error: function(){$("div#oopsCal").empty().html("Oops, something went wrong saving the reservation. Contact the Support Team.").dialog("open");$calendar.weekCalendar("refresh");}});
                  },
eventDrop: function(calEvent, element) {
           $.ajax({url:"youServerSidePage.php", data:{eventID: calEvent.id, start: calEvent.start, end:calEvent.end, title:calEvent.title}, success: function(){$("div#messageCal").empty().html("Successfully saved the reservation!").slideDown("normal", function(){window.setTimeout(function(){$("div#messageCal").slideUp('normal');}, 2000)}).position({of:"body"});$calendar.weekCalendar("refresh");}, error: function(){$("div#oopsCal").empty().html("Oops, something went wrong saving the reservation. Contact the Support Team.").dialog("open");$calendar.weekCalendar("refresh");}});

            },
eventNew : function(calEvent, $event) {
         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']");
         var bodyField = $dialogContent.find("textarea[name='body']");


         $dialogContent.dialog({
            modal: true,
            title: "New Calendar Event",
            close: function() {
               $dialogContent.dialog("destroy");
               $dialogContent.hide();
               $('#calendar').weekCalendar("removeUnsavedEvents");
            },
            buttons: {
               save : function() {

                  calEvent.id = id;
                  id++;

                  calEvent.start = new Date(startField.val());
                  calEvent.end = new Date(endField.val());
                  calEvent.title = titleField.val();
                 

                  $.ajax({url:"youServerSidePage.php", data:{eventID: calEvent.id, start: calEvent.start, end:calEvent.end, title:calEvent.title}, success: function(){$("div#messageCal").empty().html("Successfully created the reservation!").slideDown("normal", function(){window.setTimeout(function(){$("div#messageCal").slideUp('normal');$dialogContent.dialog("close");}, 2000)}).position({of:"body"});$calendar.weekCalendar("refresh");}, error: function(){$("div#oopsCal").empty().html("Oops, something went wrong saving the reservation. Contact the Support Team.").dialog("open");$dialogContent.dialog("close");$calendar.weekCalendar("refresh");}});

               },
               cancel : function() {
                  $dialogContent.dialog("close");
               }
            }
         }).show();

         $dialogContent.find(".date_holder").text($calendar.weekCalendar("formatDate", calEvent.start));
         setupStartAndEndTimeFields(startField, endField, calEvent, $calendar.weekCalendar("getTimeslotTimes", calEvent.start));

      },

What the ajax call above is doing is sending the parameters eventID, start, end, and title to your sever side page with the ID, start date, end date, and title of the event the user drag and dropped or resized or created in the dialog.  Your server side page with be looking for these parameters and then send them to the database using SQL query language.  If the save is successful, I run a function to display a message for 2 seconds saying it was successful, then close the dialog if it is a new event, and then refresh the calendar.  If there was an error I run a function to open a dialog telling the user to notify the support team that an error occurred, and then refresh the calendar.

If you do some Googling and can grasp this concept you will be on your way and can ask some specific questions that fellow plugin users can attempt to answer.

[David Finley]

OK, thank you, I will read through this and do some google searches... sorry about the dumb questions, this is my first time dealing with this stuff. All this code makes my hand spin :) LOL

[Muhammad Talal]

can I have complete code so that I can see it because I am having so much problem in it

[Nguyen Quy]

Please!
I want instance Jquery Week Calendar JWC with ASP .Net
Can you help me Jquery week calendar with ASP .Net

Thanks Doomsday Conspiracy

Vào 17:30:40 UTC+7 Thứ bảy, ngày 19 tháng ba năm 2011, Doomsday Conspiracy đã viết:

[Ankit Patel]

hello  Austin Roberts ,

 I have get success to save new event data to my data base using java (spring MVC ) but problem is that my whole page is refreshing even tough it can't refresh new JSON data ... i make conformation that new data in JSON . But calender can't display it .

If i press F5 key than calender display newly inserted data .

please help me out .... I try hard for this ..

Here i pasted my stuff ..

                                 save : function() {

             

           

                 calEvent.id = id;

                 id++;

                 calEvent.start = new Date(startField.val());

                 calEvent.end = new Date(endField.val());

                 calEvent.title = titleField.val();

      

                //insert ajax here

              $.ajax({  

                   type: "POST",  

                   url: "/EMR-PHR/insertAppointmentSchedule.html",  

                   data: "start=" +selstart+"&end=" + selend +"&title=" +  calEvent.title,

                   success: function(response){

                         // we have the response 

                         if(response.status == "SUCCESS"){

                         userInfo = "<ol>";

                        //  alert(response.result.length );

                         $calendar.weekCalendar("refresh");

                         }else{

                         

                         }      

                       },  

                       error: function(e){  

                         alert('Error: ' + e);  

                       }  

                     });

            

               //  $calendar.weekCalendar("removeUnsavedEvents");

               //  $calendar.weekCalendar("updateEvent", calEvent);

                 $dialogContent.dialog("close");

   

              },

---------------------------------------------------------

[Fakirchand Patidar]

Hello Austin Roberts,

I follow your code and save events in Database but I have another serious problem that hot to show that events on calendar.

Please sort out problem as soon as possible. I am waiting your response.

Regards & Thanks,
Fakirchand Patidar
(PHP Developer @ Bulk24SMS Networks, India)