I've been thinking about this for a few days now, as well as checking SO and the API documentation, and I cannot figure out a way to use an HTML pop up box in the FullCalendar API on the "select" property instead of the current prompt to add an event. Is There a simple way to do this "without" using another plugin. Not that I am opposed to using a plugin, it just seems like a simple thing to do, but for some reason I just can't wrap my head around it.

Edit

What I would like to do...

1. When a day is selected a pop up box appears.
2. In the pop up box there is a form that allows me to add an event and description.

Help is appreciated, thanks!

I've been thinking about this for a few days now, as well as checking SO and the API documentation, and I cannot figure out a way to use an HTML pop up box in the FullCalendar API on the "select" property instead of the current prompt to add an event. Is There a simple way to do this "without" using another plugin. Not that I am opposed to using a plugin, it just seems like a simple thing to do, but for some reason I just can't wrap my head around it.

Edit

What I would like to do...

1. When a day is selected a pop up box appears.
2. In the pop up box there is a form that allows me to add an event and description.

Help is appreciated, thanks!

• javascript
• jquery
• fullcalendar

Share Improve this question Follow edited Nov 2, 2011 at 16:01 Juan Gonzales asked Nov 2, 2011 at 15:21 Juan GonzalesJuan Gonzales 1,97722 gold badges2222 silver badges3636 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Okay so I was able to do it. start with a form in the body section...

<div class="popup"><h3>Add an Event</h3>
<form><div>Title: </div><input class="title" type="text" /><br /><br />
<a href="#" class="submitForm">submit</a></form></div>

Add a little styling...

.popup {
    background-color:ivory; border:1px solid gray;
    position:fixed; top:25%; left:25%; display:none; padding: 0px 20px 10px 10px; z-index:100;
}
.popup form div{float:left; width:80px; text-align:left;}
.popup form input{float:left; text-align:left;}

And submit the form like so...

select: function(start, end, allDay){
    $(".popup").show(); // show's pop up
    $(".title").focus(); // auto focus on the field
    var start = Date.parse(start) / 1000; // parse the start time to retain value
    var end = Date.parse(end) / 1000; // same but with end
    $(".submitForm").click(function(){ // on submission
    var title = $(".title").val(); // gets title value
    if(title != ""){ // if the title exists run script
        $.post("insertscript.php", {title: title, start:start, end: end, allDay: allDay}, // be sure to filter data 
        function(){
        $(".title").val(""); // clear title field
        start = ""; // clear start time
        end = ""; // clear end time
        calendar.fullCalendar('unselect');
        calendar.fullCalendar('refetchEvents');
        });
    }
$(".popup").hide(); // hide pop up box
});
},

Now I know that this is probably not the best way to do this, but it works and since I looked around for over three days to find the answer and no one else seemed to either have it or at least want to share it I finally buckled my seat belt and went on the ride myself. I hope that it helps someone:)

Have you thought about using jQuery UI? http://jqueryui./demos/datepicker/