0

I am trying to implement full calendar on my website. I got the calendar working, with google calendar providing the backend data. I have a few questions:

  1. How do I add agendaweek, agendaday to the view(i dont understand from the documentation) so that i have 3 buttons on top when the calendar loads?

  2. Is there a way to make the user not click on the calendar event since it brings up a google calendar page with the event details. I want the users instead to simply hover over the event to get the event details. It would be great to not show the google calendar interface for the users, but simply to use it on the backend to input calendar data. How can i acheive this?

user2096135
  • 1
  • 3

1 Answers1

1

1) You need to include the view options you want to display in the header. Something like this:

header: {
  left: 'prev,next today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
}

2) You can interrupt the click event on your events using the eventClick callback. Here you can direct the event to a popup or return false. You can use the eventMouseover callback for hovers. Check these links for the docs on these callbacks - eventClick and eventMouseOver

Hope this helps!

ganeshk
  • 5,583
  • 3
  • 27
  • 31
  • Which script are you referring to? Also, please post your JS code! – ganeshk Feb 21 '13 at 16:21
  • Ok - did you check the links I posted there? They show you exactly what to do, with examples. If you are looking for something specific, please post your code and I can see if I can show you how with that. – ganeshk Feb 21 '13 at 16:24
  • Nah! You add this to your JS code - where you are initializing FullCalendar with the Google Calendar. Can you show me what you have done so far - you can edit your question to add the code? – ganeshk Feb 21 '13 at 16:27
  • Ok so, i got the eventclick to work, it doesnt show anything but i'm having trouble with mouseover, not sure what to add inside the function to make it display event details. eventClick: [function(event) { if (event.url) { return false; } } ], eventMouseover :function(event, jsEvent, view) Please help! – user2096135 Feb 21 '13 at 16:51
  • Thank you, i duplicated the code inside mouseover but I get a dialog box with ok in it and another message inside that says "prevent this page from creating additional dialogs". Is there anyway to simply show the event details and event address instead of pop up boxes? Thanks again for all your help!!!! – user2096135 Feb 21 '13 at 17:17
  • Well, its up to you on how to show the event details. The alert is just demoing what you can do on hover. You can look into implementing something like a jQuery Dialog to show the event details. But, again, that is upto you. – ganeshk Feb 21 '13 at 17:19
  • I want it to look like this: http://www.westport.k12.ct.us/calendars/full/event-calendar/board-of-education/ – user2096135 Feb 21 '13 at 17:20
  • Can you please give any links to how to implement this using jquery dialog? – user2096135 Feb 21 '13 at 17:28
  • 1
    Here you go: http://jsfiddle.net/100thGear/Wahrw/. This is a start - you can customize the look and feel of the popup to look like that westport site. – ganeshk Feb 21 '13 at 18:54
  • So, did this help? If so, would you mind accepting my answer? – ganeshk Feb 22 '13 at 23:05