1 | <!DOCTYPE html> |
---|
2 | <html> |
---|
3 | <head> |
---|
4 | <meta charset="UTF-8"> |
---|
5 | <title>CalendarView â JavaScript Calendar Widget</title> |
---|
6 | <link rel="stylesheet" href="../stylesheets/calendarview.css"> |
---|
7 | <style> |
---|
8 | body { |
---|
9 | font-family: Trebuchet MS; |
---|
10 | } |
---|
11 | div.calendar { |
---|
12 | max-width: 240px; |
---|
13 | margin-left: auto; |
---|
14 | margin-right: auto; |
---|
15 | } |
---|
16 | div.calendar table { |
---|
17 | width: 100%; |
---|
18 | } |
---|
19 | div.dateField { |
---|
20 | width: 140px; |
---|
21 | padding: 6px; |
---|
22 | -webkit-border-radius: 6px; |
---|
23 | -moz-border-radius: 6px; |
---|
24 | color: #555; |
---|
25 | background-color: white; |
---|
26 | margin-left: auto; |
---|
27 | margin-right: auto; |
---|
28 | text-align: center; |
---|
29 | } |
---|
30 | div#popupDateField:hover { |
---|
31 | background-color: #cde; |
---|
32 | cursor: pointer; |
---|
33 | } |
---|
34 | </style> |
---|
35 | <script src="../javascripts/prototype.js"></script> |
---|
36 | <script src="../javascripts/calendarview.js"></script> |
---|
37 | <script> |
---|
38 | function setupCalendars() { |
---|
39 | // Embedded Calendar |
---|
40 | Calendar.setup( |
---|
41 | { |
---|
42 | dateField: 'embeddedDateField', |
---|
43 | parentElement: 'embeddedCalendar' |
---|
44 | } |
---|
45 | ) |
---|
46 | |
---|
47 | // Popup Calendar |
---|
48 | Calendar.setup( |
---|
49 | { |
---|
50 | dateField: 'popupDateField', |
---|
51 | triggerElement: 'popupDateField' |
---|
52 | } |
---|
53 | ) |
---|
54 | } |
---|
55 | |
---|
56 | Event.observe(window, 'load', function() { setupCalendars() }) |
---|
57 | </script> |
---|
58 | </head> |
---|
59 | <body> |
---|
60 | |
---|
61 | <div style="float: left; width: 50%"> |
---|
62 | <div style="height: 400px; background-color: #efefef; padding: 10px; -webkit-border-radius: 12px; -moz-border-radius: 12px; margin-right: 10px"> |
---|
63 | <h3 style="text-align: center; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-top: 0px; margin-bottom: 20px; padding: 8px"> |
---|
64 | Embedded Calendar |
---|
65 | </h3> |
---|
66 | <div id="embeddedExample" style=""> |
---|
67 | <div id="embeddedCalendar" style="margin-left: auto; margin-right: auto"> |
---|
68 | </div> |
---|
69 | <br /> |
---|
70 | <div id="embeddedDateField" class="dateField"> |
---|
71 | Select Date |
---|
72 | </div> |
---|
73 | <br /> |
---|
74 | </div> |
---|
75 | </div> |
---|
76 | </div> |
---|
77 | <div style="float: right; width: 50%"> |
---|
78 | <div style="height: 400px; background-color: #efefef; padding: 10px; -webkit-border-radius: 12px; -moz-border-radius: 12px; margin-left: 10px"> |
---|
79 | <h3 style="text-align: center; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; margin-top: 0px; margin-bottom: 20px; padding: 8px"> |
---|
80 | Popup Calendar |
---|
81 | </h3> |
---|
82 | <div id="popupExample"> |
---|
83 | <div id="popupDateField" class="dateField" style="margin-top: 160px"> |
---|
84 | Show Calendar |
---|
85 | </div> |
---|
86 | </div> |
---|
87 | </div> |
---|
88 | </div> |
---|
89 | |
---|
90 | </body> |
---|
91 | </html> |
---|