My favorites | Sign in
Project Home Issues
New issue   Search
for
  Advanced search   Search tips   Subscriptions

Issue 162 attachment: example.html (3.0 KB)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<h1>Agenda</h1>

<script type="text/javascript">

$(document).ready(function() {

var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();

/*
TODO:
====
- Make past appointments uneditable, undraggable, unmovable
- Make the events multicolored
- Make the events editable
- Add events via modal dialog
*/

$("#calendar").fullCalendar({
defaultView: "agendaWeek",
weekends: false,
minTime: 8,
maxTime: 21,
height: 620,
header: {
left: "prev,next today",
center: "title",
right: "month,agendaWeek,agendaDay"
},
editable: true,
events: "/appointments",
allDaySlot: false,
allDayDefault: false,
dayClick: function(dayDate, allDay, jsEvent, view){
if (view.name != "month"){
// Reset the form
// Set the start date for the new event
$("#appointment-startsAt").val(dayDate);
// Reveal the dialog
$("#event-form").dialog("open");
}
},
eventClick: function(calEvent, jsEvent, view) {
// Set the data into the form

// Change the form action URL to an update URL

// Reveal the dialog
$("#event-form").dialog("open");
},
eventDrop: function(calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
// update the event with the new data
},
eventResize: function(calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
// update the event with the new data
},

});

// Setup the dialog
$("#event-form").dialog({
title: "New appointment", autoOpen: false, resizable: false, width: 480, height: 350, modal: true
});

// Setup autocomplete for patients
$("#appointment-patient").autocomplete("/patients/search");

// Assigned the selected patient
$("#appointment-patient").result(function(event, data, formatted) {
$("#appointment-patientId").val(data[1]);
});

// Limit the notes
$('#appointment-notes').limit('255');
});

function onSubmitSuccess(data, textStatus){
$("#calendar").fullCalendar("refetchEvents");
$("#event-form").dialog("close");
}

function onSubmitError(XMLHttpRequest, textStatus, errorThrown){
alert("Oops, an error occured. Please verify your data and try again");
}

</script>

<div id="calendar"></div>

<div id="event-form" class="hidden">
<cfoutput>
#startRemoteFormTag(controller="appointments", action="create")#
<p><label class="required inlined">Enter the patient name or UID</label>
#textFieldTag(name="appointment[patient]", class="input-text")#</p>

<p><label for="appointment-doctorId">Doctor</label>
#selectTag(name="appointment[doctorId]", options=doctors, textField="fullName")#</p>

<p><label class="required inlined">Additional notes</label>
#textAreaTag(name="appointment[notes]", class="input-text")#</p>

#hiddenFieldTag(name="appointment[patientId]")#
#hiddenFieldTag(name="appointment[startsAt]")#

#submitTag(class="g-button")# or <a href="##" onclick="$('##event-form').dialog('close');">Cancel</a>
#endRemoteFormTag()#
</cfoutput>
</div>
Powered by Google Project Hosting