dhtmlx-scheduler 6.0.4 → 7.0.0

package/codebase/sources/less/src/buttons.less

@@ -0,0 +1,203 @@
+.button {
+
+	background: var(--dhx-scheduler-btn-background);
+	color: var(--dhx-scheduler-btn-color);
+	border: 1px solid var(--dhx-scheduler-btn-border-color);
+	border-radius: var(--dhx-scheduler-border-radius);
+	height: var(--dhx-scheduler-control-height);
+	padding: var(--dhx-scheduler-btn-padding, 0 20px);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	box-sizing: border-box;
+	gap: 4px;
+	flex-shrink: 0;
+	font-weight: 500;
+
+	font-size: var(--dhx-scheduler-font-size);
+	font-family: var(--dhx-scheduler-font-family);
+	font-weight: var(--dhx-scheduler-btn-font-weight, normal);
+	line-height: 142%;
+
+	text-transform: var(--dhx-scheduler-btn-text-transform);
+	cursor: pointer;
+
+	&:hover {
+		background: var(--dhx-scheduler-btn-background-hover);
+		color: var(--dhx-scheduler-btn-color-hover);
+		border-color: var(--dhx-scheduler-btn-border-hover);
+	}
+
+	&:active {
+		background: var(--dhx-scheduler-btn-background-active);
+		color: var(--dhx-scheduler-btn-color-active);
+		border-color: var(--dhx-scheduler-btn-border-active);
+	}
+
+	&:disabled{
+		background: var(--dhx-scheduler-btn-background-disabled);
+		color: var(--dhx-scheduler-btn-color-disabled);
+		border-color: var(--dhx-scheduler-btn-border-disabled);
+	}
+}
+
+
+.button-outline{
+	--dhx-scheduler-base-colors-icons: var(--dhx-scheduler-btn-color);
+
+
+	--dhx-scheduler-btn-background: var(--dhx-scheduler-btn-outline-background);
+	--dhx-scheduler-btn-color: var(--dhx-scheduler-btn-outline-color);
+	--dhx-scheduler-btn-border-color: var(--dhx-scheduler-btn-outline-border-color);
+
+	--dhx-scheduler-btn-background-hover: var(--dhx-scheduler-btn-outline-background-hover);
+	--dhx-scheduler-btn-color-hover: var(--dhx-scheduler-btn-outline-color-hover);
+	--dhx-scheduler-btn-border-hover: var(--dhx-scheduler-btn-outline-border-hover);
+
+	--dhx-scheduler-btn-background-active: var(--dhx-scheduler-btn-outline-background-active);
+	--dhx-scheduler-btn-color-active: var(--dhx-scheduler-btn-outline-color-active);
+	--dhx-scheduler-btn-border-active: var(--dhx-scheduler-btn-outline-border-active);
+
+	--dhx-scheduler-btn-background-disabled: var(--dhx-scheduler-btn-outline-background-disabled);
+	--dhx-scheduler-btn-color-disabled: var(--dhx-scheduler-btn-outline-color-disabled);
+	--dhx-scheduler-btn-border-color-disabled: var(--dhx-scheduler-btn-outline-border-color-disabled);
+}
+
+
+
+.button-danger{
+	--dhx-scheduler-btn-background: var(--dhx-scheduler-base-colors-error);
+	--dhx-scheduler-btn-color: var(--dhx-scheduler-base-colors-error-text);
+	--dhx-scheduler-btn-border-color: var(--dhx-scheduler-base-colors-error);
+
+	--dhx-scheduler-btn-background-hover: var(--dhx-scheduler-base-colors-error-hover);
+	--dhx-scheduler-btn-border-hover: var(--dhx-scheduler-base-colors-error-hover);
+
+	--dhx-scheduler-btn-background-active: var(--dhx-scheduler-base-colors-error-active);
+	--dhx-scheduler-btn-border-active: var(--dhx-scheduler-base-colors-error-active);
+}
+
+.button-danger-outline{
+	--dhx-scheduler-base-colors-icons: var(--dhx-scheduler-btn-color);
+
+
+	--dhx-scheduler-btn-background: transparent;
+	--dhx-scheduler-btn-color: var(--dhx-scheduler-base-colors-error);
+	--dhx-scheduler-btn-border-color: var(--dhx-scheduler-base-colors-error);
+
+	--dhx-scheduler-btn-background-hover: var(--dhx-scheduler-base-colors-error-lighter);
+	--dhx-scheduler-btn-color-hover: var(--dhx-scheduler-base-colors-error-hover);
+	--dhx-scheduler-btn-border-hover: var(--dhx-scheduler-base-colors-error-hover);
+
+	--dhx-scheduler-btn-background-active: var(--dhx-scheduler-base-colors-error-active);
+	--dhx-scheduler-btn-color-active: var(--dhx-scheduler-base-colors-error-active);
+	--dhx-scheduler-btn-border-active: var(--dhx-scheduler-base-colors-error-active);
+
+	--dhx-scheduler-btn-background-disabled: transparent;
+	--dhx-scheduler-btn-color-disabled: var(--dhx-scheduler-base-colors-icons);
+	--dhx-scheduler-btn-border-color-disabled: var(--dhx-scheduler-base-colors-icons);
+}
+
+.button-danger-link{
+	padding: 6px 0;
+	--dhx-scheduler-base-colors-icons: var(--dhx-scheduler-base-colors-error);
+
+	--dhx-scheduler-btn-background: transparent;
+	--dhx-scheduler-btn-color: var(--dhx-scheduler-base-colors-error);
+	--dhx-scheduler-btn-border-color: transparent;
+
+	--dhx-scheduler-btn-background-hover: transparent;
+	--dhx-scheduler-btn-color-hover: var(--dhx-scheduler-base-colors-error-hover);
+	--dhx-scheduler-btn-border-hover: transparent;
+
+	--dhx-scheduler-btn-background-active: transparent;
+	--dhx-scheduler-btn-color-active: var(--dhx-scheduler-base-colors-error-active);
+	--dhx-scheduler-btn-border-active: transparent;
+
+	--dhx-scheduler-btn-background-disabled: transparent;
+	--dhx-scheduler-btn-color-disabled: var(--dhx-scheduler-base-colors-icons);
+	--dhx-scheduler-btn-border-color-disabled: transparent;
+}
+
+.button-link {
+	padding: 6px 0;
+	--dhx-scheduler-btn-background: transparent;
+	--dhx-scheduler-btn-color: var(--dhx-scheduler-base-colors-primary);
+	--dhx-scheduler-btn-border-color: transparent;
+
+	--dhx-scheduler-btn-background-hover: transparent;
+	--dhx-scheduler-btn-color-hover: var(--dhx-scheduler-base-colors-primary-hover);
+	--dhx-scheduler-btn-border-hover: transparent;
+
+	--dhx-scheduler-btn-background-active: transparent;
+	--dhx-scheduler-btn-color-active: var(--dhx-scheduler-base-colors-primary-active);
+	--dhx-scheduler-btn-border-active: transparent;
+
+	--dhx-scheduler-btn-background-disabled: transparent;
+	--dhx-scheduler-btn-color-disabled: var(--dhx-scheduler-base-colors-icons);
+	--dhx-scheduler-btn-border-color-disabled: transparent;
+}
+
+.button-icon{
+    padding: 8px;
+    min-width: 32px;
+    height: 32px;
+    border-radius: 50%;
+
+	&:hover {
+		--dhx-scheduler-base-colors-icons: var(--dhx-scheduler-base-colors-icons-hover);
+	}
+
+	&:active {
+		--dhx-scheduler-base-colors-icons: var(--dhx-scheduler-base-colors-icons-active);
+	}
+
+	&:disabled{
+		--dhx-scheduler-base-colors-icons: var(--dhx-scheduler-btn-color-disabled);
+	}
+	.button-link();
+}
+
+.dhx_cal_btn,
+.dhx_cal_btn_danger,
+.dhx_cal_btn_outline,
+.dhx_cal_btn_danger_outline,
+.dhx_cal_btn_danger_link,
+.dhx_btn_set,
+.dhx_cal_tab,
+.dhx_qi_big_icon,
+.dhx_cal_today_button,
+.dhx_cal_tab_standalone{
+	.button();
+}
+
+
+
+.scheduler_popup_button{
+	.button();
+}
+
+.scheduler_popup_button:not(.scheduler_ok_button){
+	.button-outline();
+}
+
+.scheduler_ok_button{
+	.button-danger();
+}
+
+.dhx_cal_btn_outline,
+.dhx_cal_btn_danger_outline{
+	.button-outline();
+}
+
+.dhx_cal_button_danger{
+	.button-danger();
+}
+.dhx_cal_button_danger_outline{
+	.button-danger();
+}
+
+.dhx_cal_button_link,
+.dhx_qi_big_icon{
+	.button-link();
+}

package/codebase/sources/less/src/columns_event.less

@@ -0,0 +1,216 @@
+.dhx_scheduler_event_base {
+	background: var(--dhx-scheduler-event-background);
+	color: var(--dhx-scheduler-event-color);
+	display: flex;
+
+	padding: 2px var(--dhx-scheduler-base-module);
+	border: var(--dhx-scheduler-event-border);
+	position: absolute;
+	box-sizing: border-box;
+	font-size: var(--dhx-scheduler-event-text-font-size);
+	line-height: var(--dhx-scheduler-event-text-line-height);
+	font-weight: var(--dhx-scheduler-event-text-font-weight);
+	--dhx-scheduler-base-colors-icons: var(--dhx-scheduler-event-color);
+}
+
+.dhx_title{
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.dhx_cal_event {
+
+	display: flex;
+	flex-direction: column;
+	border-radius: var(--dhx-scheduler-border-radius);
+	flex-direction: column;
+	.dhx_scheduler_event_base();
+
+
+	.dhx_title {
+		font-size: var(--dhx-scheduler-event-title-font-size);
+		line-height: var(--dhx-scheduler-event-title-line-height);
+		max-height: 21px;
+	}
+
+	.dhx_body {
+		font-size: var(--dhx-scheduler-event-text-font-size);
+		line-height: var(--dhx-scheduler-event-text-line-height);
+		flex: 1;
+		gap: 4px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.dhx_event_move.dhx_header {
+		display: none;
+	}
+
+	.dhx_event_resize {
+		cursor: ns-resize;
+	}
+
+	.dhx_resize_denied {
+		display: none !important;
+	}
+
+	.dhx_header {}
+
+	.dhx_footer {
+		position: absolute;
+		bottom: 2px;
+		opacity: 0;
+	}
+
+	.dhx_menu_icon {
+		--dhx-scheduler-base-colors-icons: var(--dhx-scheduler-event-text);
+	}
+
+	.dhx_menu_icon.icon_delete {
+		margin-left: -2px;
+	}
+
+	&.dhx_cal_select_menu {
+		padding: 2px;
+		padding-top: 8px;
+		padding-bottom: 8px;
+		box-shadow: var(--dhx-scheduler-box-shadow-s);
+		--dhx-scheduler-event-background: var(--dhx-scheduler-event-menu-background);
+		--dhx-scheduler-event-color: var(--dhx-scheduler-event-menu-color);
+
+		.dhx_body {
+			display: flex;
+			flex-direction: column;
+			gap: 4px;
+			align-items: center;
+		}
+	}
+
+	textarea.dhx_cal_editor {
+		width: 100%;
+		height: 100%;
+		padding: 0;
+		margin: 0;
+		overflow: auto;
+		font-family: var(--dhx-scheduler-font-family);
+		font-size: var(--dhx-scheduler-font-size);
+	}
+}
+
+.dhx_cal_event_cascade{
+	--dhx-scheduler-event-border: 1px solid rgba(0,0,0, 0.05);
+ }
+
+.dhx_cal_editor {
+	z-index: 10;
+}
+
+
+.dhx_cal_event {
+
+	.dhx_footer,
+	.dhx_select_menu_footer {
+		height: calc(var(--dhx-scheduler-base-module) * 2);
+		border-width: 0;
+		position: relative;
+		margin-left: auto;
+		margin-right: auto;
+		.scheduler_icon();
+		.scheduler_icon.dots_h();
+	}
+
+
+	&.dhx_cal_event_drag,
+	&.dhx_cal_event_selected,
+	&:hover {
+		.dhx_event_resize.dhx_footer {
+			opacity: 1;
+			background-color: transparent;
+		}
+	}
+
+}
+
+.dhx_cal_event_line {
+	.dhx_scheduler_event_base();
+
+	--dhx-scheduler-event-text-font-size: var(--dhx-scheduler-event-bar-font-size);
+	--dhx-scheduler-event-text-line-height: var(--dhx-scheduler-event-bar-line-height);
+	cursor: pointer;
+	align-items: center;
+	z-index: 1;
+	overflow: hidden;
+	padding-left: 12px;
+	white-space: nowrap;
+
+	&.dhx_cal_event_line_end {
+		border-top-right-radius: var(--dhx-scheduler-border-radius);
+		border-bottom-right-radius: var(--dhx-scheduler-border-radius);
+	}
+
+	&.dhx_cal_event_line_start {
+		border-top-left-radius: var(--dhx-scheduler-border-radius);
+		border-bottom-left-radius: var(--dhx-scheduler-border-radius);
+	}
+
+	&.dhx_cal_event--small{
+		padding-left: 8px;
+	}
+	&.dhx_cal_event--xsmall{
+		padding-left: 4px;
+	}
+}
+
+.dhx_cal_container_rtl {
+	.dhx_cal_event_line{
+		border-top-right-radius: unset;
+		border-bottom-right-radius: unset;
+		border-top-left-radius: unset;
+		border-bottom-left-radius: unset;
+		&.dhx_cal_event_line_end {
+			border-top-left-radius: var(--dhx-scheduler-border-radius);
+			border-bottom-left-radius: var(--dhx-scheduler-border-radius);
+		}
+	
+		&.dhx_cal_event_line_start {
+			border-top-right-radius: var(--dhx-scheduler-border-radius);
+			border-bottom-right-radius: var(--dhx-scheduler-border-radius);
+		}
+	}
+}
+
+.dhx_cal_event{
+	&.dhx_cal_event--xsmall,
+	&.dhx_cal_event--small {
+
+		flex-direction: row-reverse;
+		justify-content: space-between;
+		--dhx-scheduler-event-title-font-size: var(--dhx-scheduler-event-bar-font-size);
+		--dhx-scheduler-event-title-line-height: var(--dhx-scheduler-event-bar-line-height);
+		--dhx-scheduler-event-text-font-size: var(--dhx-scheduler-event-bar-font-size);
+		--dhx-scheduler-event-text-line-height: var(--dhx-scheduler-event-bar-line-height);
+
+		gap: 4px;
+		padding-top: 2px;
+		padding-bottom: 1px;
+
+		.dhx_title {
+			display: flex;
+			justify-content: end;
+		}
+
+		.dhx_body {
+			flex-grow: 2;
+		}
+
+		.dhx_footer,
+		.dhx_select_menu_footer {
+			position: absolute;
+			bottom: 0;
+			left: 4px;
+			width: 100%;
+			transform: translateY(50%);
+		}
+	}
+}

package/codebase/sources/less/src/columns_view.less

@@ -0,0 +1,115 @@
+.dhx_scale_text_styles {
+	font-size: var(--dhx-scheduler-caption-font-size);
+	font-weight: var(--dhx-scheduler-caption-font-weight);
+	color: var(--dhx-scheduler-scale-color);
+	line-height: 133%;
+}
+
+.dhx_scale_bar {
+	.dhx_scale_text_styles();
+	display: flex;
+	box-sizing: border-box;
+	height: 100%;
+	justify-content: center;
+	align-items: baseline;
+
+	padding: var(--dhx-scheduler-base-padding);
+	border-left: var(--dhx-scheduler-header-border);
+	overflow: hidden;
+}
+
+.dhx_scale_holder {
+	border-right: var(--dhx-scheduler-default-border);
+	background: var(--dhx-scheduler-timescale-background);
+	box-sizing: border-box;
+
+	&_now {
+		--dhx-scheduler-timescale-background: var(--dhx-scheduler-timescale-today-background);
+	}
+}
+
+.dhx_cal_container_rtl {
+	.dhx_scale_bar {
+		border-left: none;
+		border-right: var(--dhx-scheduler-header-border);
+	}
+
+	.dhx_scale_holder {
+		border-right: none;
+		border-left: var(--dhx-scheduler-default-border);
+	}
+}
+
+.dhx_scale_hour {
+	.dhx_scale_text_styles();
+
+	font-size: var(--dhx-scheduler-hours-font-size);
+	font-weight: var(--dhx-scheduler-hours-font-weight);
+	border-bottom: var(--dhx-scheduler-default-border);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: start;
+	box-sizing: border-box;
+	padding: var(--dhx-scheduler-base-padding);
+	box-sizing: border-box;
+
+}
+
+.dhx_scale_time_slot {
+
+
+	box-sizing: border-box;
+	border-bottom: var(--dhx-scheduler-default-border);
+
+
+	&.dhx_scale_time_slot_hour_start {
+		border-bottom: var(--dhx-scheduler-halfhour-border);
+	}
+}
+
+.dhx_drag_marker {
+	width: 100%;
+	opacity: .5;
+	background-color: var(--dhx-scheduler-base-colors-border);
+	position: absolute;
+	box-sizing: border-box;
+	border-top: var(--dhx-scheduler-default-border);
+	;
+	border-bottom: var(--dhx-scheduler-default-border);
+	;
+}
+
+.dhx_multi_day {
+	position: relative;
+	// border-bottom: var(--dhx-scheduler-default-border);
+	border-top: var(--dhx-scheduler-default-border);
+}
+
+.dhx_multi_day_icon,
+.dhx_multi_day_icon_small {
+	background-position: 50%;
+	font-size: 32px;
+	border-bottom: var(--dhx-scheduler-default-border);
+	border-right: var(--dhx-scheduler-default-border);
+	background-repeat: no-repeat;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.scheduler_icon();
+	.scheduler_icon.clock();
+}
+
+.dhx_multi_day_icon_small {
+	font-size: 16px;
+}
+
+.dhx_cal_container_rtl {
+
+	.dhx_multi_day_icon,
+	.dhx_multi_day_icon_small {
+		border-right: none;
+		border-left: var(--dhx-scheduler-default-border);
+	}
+}