diff --git a/UI/WebServerResources/UIxCalendarProperties.css b/UI/WebServerResources/UIxCalendarProperties.css
new file mode 100644
index 000000000..dc80db088
--- /dev/null
+++ b/UI/WebServerResources/UIxCalendarProperties.css
@@ -0,0 +1,36 @@
+LABEL
+{ display: block;
+  position: relative;
+  line-height: 1.5em;
+  height: 1.5em;
+  margin-left: .5em;
+  margin-bottom: .5em;
+  width: 100%; }
+
+DIV#propertiesView
+{ overflow: hidden;
+  padding: .5em; }
+
+SPAN.content
+{ position: absolute;
+  top: -.25em;
+  left: 8em;
+  right: 1em; }
+
+BUTTON#colorButton
+{
+  display: none;
+  margin: 1px;
+  border-bottom: 1px solid #fff;
+  border-right: 1px solid #fff;
+  border-top: 2px solid #222;
+  border-left: 2px solid #222;
+  -moz-border-top-colors: #9c9a94 #000 transparent;
+  -moz-border-left-colors: #9c9a94 #000 transparent;
+  width: 3em;
+  height: 2em;
+}
+
+DIV#buttons
+{ padding: .5em;
+  text-align: right; }
diff --git a/UI/WebServerResources/UIxCalendarProperties.js b/UI/WebServerResources/UIxCalendarProperties.js
new file mode 100644
index 000000000..340d33a1f
--- /dev/null
+++ b/UI/WebServerResources/UIxCalendarProperties.js
@@ -0,0 +1,46 @@
+function onLoadCalendarProperties() {
+  var colorButton = $("colorButton");
+  var calendarColor = $("calendarColor");
+  colorButton.setStyle({ "backgroundColor": calendarColor.value, display: "inline" });
+  colorButton.observe("click", onColorClick);
+
+  var cancelButton = $("cancelButton");
+  cancelButton.observe("click", onCancelClick);
+
+  var okButton = $("okButton");
+  okButton.observe("click", onOKClick);
+}
+
+function onCancelClick(event) {
+  window.close();
+}
+
+function onOKClick(event) {
+  var calendarName = $("calendarName");
+  var calendarColor = $("calendarColor");
+  var calendarID = $("calendarID");
+
+  window.opener.updateCalendarProperties(calendarID.value,
+					 calendarName.value,
+					 calendarColor.value);
+}
+
+function onColorClick(event) {
+  var cPicker = window.open(ApplicationBaseURL + "colorPicker", "colorPicker",
+			    "width=250,height=200,resizable=0,scrollbars=0"
+			    + "toolbar=0,location=0,directories=0,status=0,"
+			    + "menubar=0,copyhistory=0", "test"
+			    );
+  cPicker.focus();
+
+  preventDefault(event);
+}
+
+function onColorPickerChoice(newColor) {
+  var colorButton = $("colorButton");
+  colorButton.setStyle({ "backgroundColor": newColor });
+  var calendarColor = $("calendarColor");
+  calendarColor.value = newColor;
+}
+
+FastInit.addOnLoad(onLoadCalendarProperties);
diff --git a/UI/WebServerResources/UIxColorPicker.js b/UI/WebServerResources/UIxColorPicker.js
new file mode 100644
index 000000000..892635d7c
--- /dev/null
+++ b/UI/WebServerResources/UIxColorPicker.js
@@ -0,0 +1,9 @@
+function onLoadColorPicker(event) {
+  showColorPicker();
+}
+
+function onChooseColor(newColor) {
+  window.opener.onColorPickerChoice(newColor);
+}
+
+FastInit.addOnLoad(onLoadColorPicker);