Created
May 19, 2011 07:30
-
-
Save oskimura/980353 to your computer and use it in GitHub Desktop.
jquery-frontier-calのテストコード
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html><head><title></title> | |
| <link rel="stylesheet" type="text/css" href="css/frontierCalendar/jquery-frontier-cal-1.3.2.css" /> | |
| <!-- Include CSS for color picker plugin (Not required for calendar plugin. Used for example.) --> | |
| <link rel="stylesheet" type="text/css" href="css/colorpicker/colorpicker.css" /> | |
| <link rel="stylesheet" type="text/css" href="css/jquery-ui/smoothness/jquery-ui-1.8.1.custom.css" /> | |
| <script type="text/javascript" src="js/jquery-core/jquery-1.4.2-ie-fix.min.js"></script> | |
| <script type="text/javascript" src="js/jquery-ui/smoothness/jquery-ui-1.8.1.custom.min.js"></script> | |
| <!-- Include color picker plugin (Not required for calendar plugin. Used for example.) --> | |
| <script type="text/javascript" src="js/colorpicker/colorpicker.js"></script> | |
| <!-- Include jquery tooltip plugin (Not required for calendar plugin. Used for example.) --> | |
| <script type="text/javascript" src="js/jquery-qtip-1.0.0-rc3140944/jquery.qtip-1.0.js"></script> | |
| <!-- ** jshashtable-2.1.js MUST BE INCLUDED BEFORE THE FRONTIER CALENDAR PLUGIN. ** --> | |
| <script type="text/javascript" src="js/lib/jshashtable-2.1.js"></script> | |
| <script type="text/javascript" src="js/frontierCalendar/jquery-frontier-cal-1.3.2.js"></script> | |
| <script> | |
| $(document).ready(function(){ | |
| var clickDate = ""; | |
| /** | |
| * Initializes calendar. | |
| */ | |
| var jfcalplugin = $("#mycal").jFrontierCal({ | |
| date: new Date(), | |
| dayClickCallback: myDayClickHandler, | |
| agendaClickCallback: myAgendaClickHandler, | |
| agendaDropCallback: myAgendaDropHandler, | |
| applyAgendaTooltipCallback: myApplyTooltip, | |
| agendaDragStartCallback : myAgendaDragStart, | |
| agendaDragStopCallback : myAgendaDragStop, | |
| dragAndDropEnabled: true | |
| }).data("plugin"); | |
| /** | |
| * Get the date (Date object) of the day that was clicked from the event object | |
| */ | |
| function myDayClickHandler(eventObj){ | |
| var date = eventObj.data.calDayDate; | |
| clickDate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate(); | |
| $('#add-event-form').dialog('open'); | |
| }; | |
| /** | |
| * Initialize add event modal form | |
| */ | |
| $("#add-event-form").dialog({ | |
| autoOpen: false, | |
| height: 400, | |
| width: 400, | |
| modal: true, | |
| buttons: { | |
| 'Add Event': function() { | |
| var what = jQuery.trim($("#what").val()); | |
| if(what == "") | |
| { | |
| alert("Please enter a short event description into the \"what\" field."); | |
| return; | |
| } | |
| // Dates use integers | |
| d = clickDate.split("-") | |
| var startDateObj = new Date(d[0],d[1]-1,d[2]); | |
| var endDateObj = new Date(d[0],d[1]-1,d[2]); | |
| // add new event to the calendar | |
| try { | |
| jfcalplugin.addAgendaItem('#mycal', | |
| what, | |
| startDateObj, | |
| endDateObj, | |
| false, | |
| null, | |
| { | |
| backgroundColor: "#FF0000", | |
| foregroundColor: "#FFFFFF" | |
| }); | |
| } catch(e) | |
| { | |
| alert(e); | |
| } | |
| $(this).dialog('close'); | |
| } | |
| }, | |
| open: function(event, ui){ | |
| $("#startDate").val(clickDate); | |
| }, | |
| close: function() { | |
| $("#startDate").datepicker("destroy"); | |
| $("#startDate").val(""); | |
| $("#what").val(""); | |
| } | |
| }); | |
| /** | |
| * Get the agenda item that was clicked. | |
| */ | |
| function myAgendaClickHandler (eventObj){ | |
| var agendaId = eventObj.data.agendaId; | |
| var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId); | |
| $('#add-event-form').dialog('open'); | |
| }; | |
| /** | |
| * get the agenda item that was dropped. It's start and end dates will be updated. | |
| */ | |
| function myAgendaDropHandler(eventObj){ | |
| var agendaId = eventObj.data.agendaId; | |
| var date = eventObj.data.calDayDate; | |
| var agendaItem = jfcalplugin.getAgendaItemById("#mycal",agendaId); | |
| }; | |
| /** | |
| * Do something when dragging starts on agenda div | |
| */ | |
| function myAgendaDragStart(eventObj,divElm,agendaItem){ | |
| // destroy our qtip tooltip | |
| if(divElm.data("qtip")){ | |
| divElm.qtip("destroy"); | |
| } | |
| }; | |
| /** | |
| * Do something when dragging stops on agenda div | |
| */ | |
| function myAgendaDragStop(eventObj,divElm,agendaItem){ | |
| }; | |
| /** | |
| * Custom tooltip - use any tooltip library you want to display the agenda data. | |
| * | |
| * For this example we use qTip - http://craigsworks.com/projects/qtip/ | |
| * | |
| * @param divElm - jquery object for agenda div element | |
| * @param agendaItem - javascript object containing agenda data. | |
| */ | |
| function myApplyTooltip(divElm,agendaItem){ | |
| // Destroy currrent tooltip if present | |
| if(divElm.data("qtip")){ | |
| divElm.qtip("destroy"); | |
| } | |
| var displayData = ""; | |
| var title = agendaItem.title; | |
| var startDate = agendaItem.startDate; | |
| var endDate = agendaItem.endDate; | |
| var allDay = agendaItem.allDay; | |
| var data = agendaItem.data; | |
| displayData += "<br><b>" + title+ "</b><br><br>"; | |
| if(allDay){ | |
| displayData += "(All day event)<br><br>"; | |
| }else{ | |
| displayData += "<b>Starts:</b> " + startDate + "<br>" + "<b>Ends:</b> " + endDate + "<br><br>"; | |
| } | |
| for (var propertyName in data) { | |
| displayData += "<b>" + propertyName + ":</b> " + data[propertyName] + "<br>" | |
| } | |
| // apply tooltip | |
| divElm.qtip({ | |
| content: displayData, | |
| position: { | |
| corner: { | |
| tooltip: "bottomMiddle", | |
| target: "topMiddle" | |
| }, | |
| adjust: { | |
| mouse: true, | |
| x: 0, | |
| y: -15 | |
| }, | |
| target: "mouse" | |
| }, | |
| show: { | |
| when: { | |
| event: 'mouseover' | |
| } | |
| }, | |
| style: { | |
| border: { | |
| width: 5, | |
| radius: 10 | |
| }, | |
| padding: 10, | |
| textAlign: "left", | |
| tip: true, | |
| name: "dark" | |
| } | |
| }); | |
| }; | |
| return jfcalplugin; | |
| }); | |
| </script> | |
| </head><body><head></head><body> | |
| <div id="mycal"> | |
| </div> | |
| <div id="add-event-form" title="Add New Event"> | |
| <input type="text" name="what" id="what" class="text ui-widget-content ui-corner-all" /> | |
| <input type="text" id="startDate" class="text ui-widget-content ui-corner-all" /> | |
| </div> | |
| </body></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment