diff --git a/calendar/js/app.js b/calendar/js/app.js
index 25fcbd2a47..cacecf03b9 100644
--- a/calendar/js/app.js
+++ b/calendar/js/app.js
@@ -662,7 +662,7 @@ app.classes.calendar = AppJS.extend(
 	{
 		this.egw.open_link(this.egw.link("/index.php",vars),'_blank','700x700');
 	},
-
+	
 	/**
 	 * control delete_series popup visibility
 	 *
@@ -676,7 +676,47 @@ app.classes.calendar = AppJS.extend(
 
 		if (exceptions)
 		{
-			$j(document.getElementById('calendar-edit_calendar-delete_series')).show();
+			var buttons = [
+				{
+					button_id: 'keep',
+					statustext:'All exceptions are converted into single events.',
+					text: 'Keep exceptions',
+					id: 'button[delete_keep_exceptions]',
+					image: 'keep', "default":true
+				},
+				{
+					button_id: 'delete',
+					statustext:'The exceptions are deleted together with the series.',
+					text: 'Delete exceptions',
+					id: 'button[delete_exceptions]',
+					image: 'delete'
+				},
+				{
+					button_id: 'cancel',
+					text: 'Cancel',
+					id: 'dialog[cancel]',
+					image: 'cancel'
+				}
+				
+			];
+			var self = this;
+			et2_dialog.show_dialog
+			(
+					function(_button_id)
+					{
+						if (_button_id != 'dialog[cancel]')
+						{
+							self.et2._inst.submit(_button_id);
+							return true;
+						}
+						else
+						{
+							return false;
+						}
+					},
+					this.egw.lang("Do you want to keep the series exceptions in your calendar?"),
+					this.egw.lang("This event is part of a series"), {}, buttons , et2_dialog.WARNING_MESSAGE
+			);
 		}
 		else if (content['recur_type'] !== 0)
 		{
diff --git a/calendar/templates/default/app.css b/calendar/templates/default/app.css
index b0b5517b6d..3afcd03944 100644
--- a/calendar/templates/default/app.css
+++ b/calendar/templates/default/app.css
@@ -569,15 +569,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * edit series or exception popup used in eventWidget and
  * delete series and exceptions popup used in edit event
  */
-#calendar-edit_calendar-delete_series{
-	position: fixed;
-	top: 100px;
-	left: 200px;
-	z-index: 20000;
-	display: none;
-	border-collapse:collapse;
-	border-spacing:0px
-}
+
 #dialog-content {
 	display:block;
 	height:100px;
diff --git a/calendar/templates/default/edit.xet b/calendar/templates/default/edit.xet
index ef6c14422a..d35970a4da 100644
--- a/calendar/templates/default/edit.xet
+++ b/calendar/templates/default/edit.xet
@@ -261,7 +261,6 @@
 				<hbox align="center">
 					<button statustext="All exceptions are converted into single events." label="Keep exceptions" id="button[delete_keep_exceptions]" image="keep" background_image="1"/>
 					<button statustext="The exceptions are deleted together with the series." label="Delete exceptions" id="button[delete_exceptions]" image="delete" background_image="1"/>
-					<buttononly label="Cancel" onclick="jQuery(document.getElementById('calendar-edit_calendar-delete_series')).hide();"/>
 				</hbox>
 			</vbox>
 		</vbox>
@@ -343,5 +342,6 @@
 			<checkbox label="Do not notify" id="no_notifications"/>
 			<button align="right" statustext="Delete this event" label="Delete" id="button[delete]" onclick="app.calendar.delete_btn(widget,$cont[query_delete_exceptions]);" image="delete" background_image="1"/>
 		</hbox>
+		<template id="calendar.delete_series"/>
 	</template>
 </overlay>
\ No newline at end of file
diff --git a/calendar/templates/pixelegg/app.css b/calendar/templates/pixelegg/app.css
index 46ba8a1ecf..4a917ec77b 100755
--- a/calendar/templates/pixelegg/app.css
+++ b/calendar/templates/pixelegg/app.css
@@ -11,7 +11,7 @@
  * @package calendar
  * @version $Id$
  */
-/* $Id: app.css 47104 2014-05-27 15:02:56Z hnategh $ */
+/* $Id: app.css 47157 2014-06-04 07:32:17Z hnategh $ */
 /* Header classes */
 tr.dialogHeader td,
 tr.dialogHeader2 td,
@@ -576,15 +576,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * edit series or exception popup used in eventWidget and
  * delete series and exceptions popup used in edit event
  */
-#calendar-edit_calendar-delete_series {
-  position: fixed;
-  top: 100px;
-  left: 200px;
-  z-index: 20000;
-  display: none;
-  border-collapse: collapse;
-  border-spacing: 0px;
-}
 #dialog-content {
   display: block;
   height: 100px;
@@ -1944,42 +1935,6 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * edit series or exception popup used in eventWidget and
  * delete series and exceptions popup used in edit event
  */
-#calendar-edit_calendar-delete_series {
-  position: fixed;
-  top: 200px;
-  left: 500px;
-  z-index: 20000;
-  display: none;
-  border-collapse: collapse;
-  border-spacing: 0px;
-  background-color: #fff;
-  /*.border_normal;*/
-  /*.box_shadow_standard_light;*/
-  /*.rounded (3px);*/
-  color: #000000;
-  -webkit-appearance: none;
-  -webkit-transition-property: background-color;
-  -moz-transition-property: background-color;
-  -o-transition-property: background-color;
-  transition-property: background-color;
-  -webkit-transition-duration: 0.5s;
-  -moz-transition-duration: 0.5s;
-  -o-transition-duration: 0.5s;
-  transition-duration: 0.5s;
-  -webkit-transition-timing-function: linear;
-  -moz-transition-timing-function: linear;
-  -o-transition-timing-function: linear;
-  transition-timing-function: linear;
-  background-color: #b4b4b4;
-}
-#delete_series {
-  top: 100px;
-  left: 200px;
-}
-#delete_series input,
-#edit_series input {
-  margin: 8px;
-}
 #dialog-content {
   display: block;
   height: 100px;
diff --git a/calendar/templates/pixelegg/app.less b/calendar/templates/pixelegg/app.less
index 4b12804d52..4278719f5a 100755
--- a/calendar/templates/pixelegg/app.less
+++ b/calendar/templates/pixelegg/app.less
@@ -1383,24 +1383,7 @@ e.g. the div with class calendar_calTimeGrid is generated by the timeGridWidget
  * edit series or exception popup used in eventWidget and
  * delete series and exceptions popup used in edit event
  */
-#calendar-edit_calendar-delete_series {
-    position: fixed;
-    top: 200px;
-    left: 500px;
-    z-index: 20000;
-    display: none;
-    border-collapse:collapse;
-    border-spacing:0px;
-    background-color: #fff;
-    .Complete_Button_normal;
-}
-#delete_series {
-    top: 100px;
-    left: 200px;
-}
-#delete_series input,#edit_series input {
-    margin: 8px;
-}
+
 #dialog-content {
     display:block;
     height:100px;