@bagelink/vue 0.0.1240 → 0.0.1246

package/dist/style.css

@@ -320,16 +320,19 @@ display: block;
 }
 }
 
-.agenda__event[data-v-7667cd3d] {
-	background-color: var(--2331113a);
-	color: var(--13d56971);
+.agenda__event[data-v-5740437b] {
+	border-inline-start: 0.75rem solid;
+	border-color: var(--2e2f2739);
+	background: var(--input-bg);
+	grid-template-columns: 200px auto;
+	box-shadow: 0 0 0 1px var(--border-color);
 }
 
-.agenda__wrapper[data-v-01274c4e] {
+.agenda__wrapper[data-v-746fe0c6] {
 	grid-template-columns: 100px 1fr;
 }
 @media screen and (max-width: 910px) {
-.agenda__wrapper[data-v-01274c4e] {
+.agenda__wrapper[data-v-746fe0c6] {
 		grid-template-columns: 40px 1fr;
 }
 }
@@ -339,7 +342,7 @@ display: block;
 	z-index: 50;
 	background-color: #fff;
 	max-height: 100%;
-	width: var(--34f9e9aa);
+	width: var(--82e0d6e0);
 	max-width: 98%;
 	border: var(--qalendar-border-gray-thin);
 	border-radius: 8px;
@@ -379,7 +382,7 @@ display: block;
 .is-not-editable .event-flyout__menu-close {
 	position: absolute;
 	top: 0;
-	right: 0;
+	inset-inline-end: 0;
 }
 .event-flyout__menu-item {
 	font-size: var(--qalendar-font-l);
@@ -448,69 +451,72 @@ display: block;
     height: 6px;
 }
 
-.calendar-month__weekday[data-v-de994cfd] {
+.calendar-month__weekday[data-v-c1dfa100] {
   height: 100%;
   flex: 1;
   display: flex;
   flex-flow: column;
   align-items: center;
-  border-right: var(--qalendar-border-gray-thin);
+  border-inline-end: var(--qalendar-border-gray-thin);
   border-bottom: var(--qalendar-border-gray-thin);
   overflow: hidden;
   transition: background-color 0.2s ease-in-out;
 }
-.calendar-month__weekday.is-droppable[data-v-de994cfd] {
+.calendar-month__weekday[data-v-c1dfa100]:active {
+  background-color: var(--qalendar-light-gray);
+}
+.calendar-month__weekday.is-droppable[data-v-c1dfa100] {
   background-color: var(--qalendar-light-gray);
 }
-.calendar-month__weekday[data-v-de994cfd]:last-child {
-  border-right: 0;
+.calendar-month__weekday[data-v-c1dfa100]:last-child {
+  border-inline-end: 0;
 }
-.calendar-month__weekday.is-selected[data-v-de994cfd] {
+.calendar-month__weekday.is-selected[data-v-c1dfa100] {
   box-shadow: inset 0 0 0 1px var(--bgl-primary);
 }
-.calendar-month__weekday-more[data-v-de994cfd] {
+.calendar-month__weekday-more[data-v-c1dfa100] {
   font-size: var(--qalendar-font-2xs);
   width: 100%;
-  padding-left: 4px;
+  padding-inline-start: 4px;
   color: var(--qalendar-gray-quite-dark);
   cursor: pointer;
 }
-.calendar-month_events[data-v-de994cfd] {
+.calendar-month_events[data-v-c1dfa100] {
   width: 100%;
 }
-.qalendar-is-small .calendar-month_events[data-v-de994cfd] {
+.qalendar-is-small .calendar-month_events[data-v-c1dfa100] {
   display: flex;
   flex-flow: row;
   justify-content: center;
 }
-.qalendar-is-small .calendar-month_events .calendar-month__weekday-more[data-v-de994cfd] {
+.qalendar-is-small .calendar-month_events .calendar-month__weekday-more[data-v-c1dfa100] {
   display: none;
 }
-.calendar-month__weekday.is-today .calendar-month__day-date[data-v-de994cfd] {
+.calendar-month__weekday.is-today .calendar-month__day-date[data-v-c1dfa100] {
   background-color: var(--bgl-primary);
   color: #fff;
   border-radius: 50%;
   padding: 4px 6px;
 }
-.qalendar-is-small .calendar-month__weekday.is-today .calendar-month__day-date[data-v-de994cfd] {
+.qalendar-is-small .calendar-month__weekday.is-today .calendar-month__day-date[data-v-c1dfa100] {
   padding: 2px 4px;
 }
-.space-reserver[data-v-de994cfd] {
+.space-reserver[data-v-c1dfa100] {
   height: 100%;
   flex: 1;
   display: flex;
   flex-flow: column;
   align-items: center;
-  border-right: var(--qalendar-border-gray-thin);
+  border-inline-end: var(--qalendar-border-gray-thin);
   border-bottom: var(--qalendar-border-gray-thin);
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
 }
-.space-reserver + .calendar-month__weekday[data-v-de994cfd]:not(.trailing-or-leading) {
-  border-left: var(--qalendar-border-gray-thin);
+.space-reserver + .calendar-month__weekday[data-v-c1dfa100]:not(.trailing-or-leading) {
+  border-inline-start: var(--qalendar-border-gray-thin);
 }
 @media (prefers-color-scheme: dark) {
-.calendar-month__weekday[data-v-de994cfd],
-  .space-reserver[data-v-de994cfd] {
+.calendar-month__weekday[data-v-c1dfa100],
+  .space-reserver[data-v-c1dfa100] {
     border-color: var(--qalendar-dark-mode-line-color);
 }
 }
@@ -522,8 +528,18 @@ display: block;
 .calendar-month__week:first-child {
 		border-top: var(--qalendar-border-gray-thin);
 }
+.calendar-root.mode-is-month.qalendar-is-small .calendar-month.h-100p{
+		height: auto !important;
+}
+.calendar-root.mode-is-month.qalendar-is-small .calendar-month__weeks{
+		display: block !important;
+		height: auto !important;
+}
+.calendar-root.mode-is-month.qalendar-is-small .calendar-month__weekday{
+		height: 40px !important;
+}
 
-.calendar-week__event[data-v-6b5ab9be] {
+.calendar-week__event[data-v-9fd5622b] {
 	position: absolute;
 	width: 100%;
 	border-radius: 4px;
@@ -532,22 +548,22 @@ display: block;
 	user-select: none;
 	overflow: hidden;
 }
-.calendar-week__event.is-editable[data-v-6b5ab9be] {
+.calendar-week__event.is-editable[data-v-9fd5622b] {
 	cursor: grab;
 }
-.calendar-week__event.has-disabled-dnd[data-v-6b5ab9be] {
+.calendar-week__event.has-disabled-dnd[data-v-9fd5622b] {
 	cursor: initial;
 }
-.calendar-week__event .calendar-week__event-row[data-v-6b5ab9be] {
+.calendar-week__event .calendar-week__event-row[data-v-9fd5622b] {
 	display: flex;
 	align-items: flex-start;
 	margin-bottom: 0.25em;
 }
-.calendar-week__event .calendar-week__event-row p[data-v-6b5ab9be] {
+.calendar-week__event .calendar-week__event-row p[data-v-9fd5622b] {
 	margin: 0;
 	padding: 0;
 }
-.calendar-week__event .calendar-week__event-info-wrapper[data-v-6b5ab9be] {
+.calendar-week__event .calendar-week__event-info-wrapper[data-v-9fd5622b] {
 	position: relative;
 	padding: var(--qalendar-spacing-half);
 	font-size: var(--qalendar-font-xs);
@@ -555,27 +571,27 @@ display: block;
 	box-sizing: border-box;
 	user-select: none;
 }
-.calendar-week__event .calendar-week__event-blend-out[data-v-6b5ab9be] {
+.calendar-week__event .calendar-week__event-blend-out[data-v-9fd5622b] {
 	position: absolute;
 	bottom: 0;
 	height: 20px;
 	width: 100%;
 	transform: translateX(calc(var(--qalendar-spacing-half) * -1));
 }
-.calendar-week__event .calendar-week__event-icon[data-v-6b5ab9be] {
+.calendar-week__event .calendar-week__event-icon[data-v-9fd5622b] {
 	margin: 2px 4px 0 0;
 	font-size: var(--qalendar-font-xs);
 }
-.calendar-week__event .calendar-week__event-resize[data-v-6b5ab9be] {
+.calendar-week__event .calendar-week__event-resize[data-v-9fd5622b] {
 	position: absolute;
 	width: 100%;
 	cursor: ns-resize;
 	height: 5px;
 }
-.calendar-week__event .calendar-week__event-resize-up[data-v-6b5ab9be] {
+.calendar-week__event .calendar-week__event-resize-up[data-v-9fd5622b] {
 	top: 0;
 }
-.calendar-week__event .calendar-week__event-resize-down[data-v-6b5ab9be] {
+.calendar-week__event .calendar-week__event-resize-down[data-v-9fd5622b] {
 	bottom: 0;
 }
 
@@ -600,43 +616,38 @@ display: block;
 	border-bottom: 1px solid var(--border-color);
 }
 
-.day-timeline[data-v-a4d8d28d] {
-	position: absolute;
-	top: 0;
-	left: 0;
+.day-timeline[data-v-0b3de5c5] {
 	width: calc(100% + 10px);
-	height: var(--73f3c772);
+	height: var(--399901d6);
 	transform: translateX(-10px);
-	display: flex;
-	flex-flow: column;
-	justify-content: space-evenly;
 }
-.day-timeline__hour[data-v-a4d8d28d] {
-	padding-left: 4px;
-	display: flex;
-	flex-flow: column;
-	justify-content: flex-start;
-	height: 100%;
+[dir="rtl"] .day-timeline[data-v-0b3de5c5] {
+	transform: translateX(10px);
+}
+[dir="rtl"] .ltr .day-timeline[data-v-0b3de5c5] {
+	transform: translateX(-10px);
+}
+.day-timeline__hour[data-v-0b3de5c5] {
 	font-size: clamp(10px, 0.625rem, 14px);
 	color: var(--qalendar-gray-quite-dark);
 }
-.day-timeline__hour-text[data-v-a4d8d28d] {
-	line-height: 0;
+.day-timeline__hour-text[data-v-0b3de5c5] {
 	transform: translate(-40px, 0);
 }
-.day-timeline__hour:first-child .day-timeline__hour-text[data-v-a4d8d28d] {
-	display: none;
+[dir="rtl"] .day-timeline__hour-text[data-v-0b3de5c5] {
+	transform: translate(40px, 0);
 }
-.day-timeline__hour[data-v-a4d8d28d]:not(:last-child) {
-	border-bottom: var(--qalendar-border-gray-thin);
+[dir="rtl"] .ltr .day-timeline__hour-text[data-v-0b3de5c5] {
+	transform: translate(-40px, 0);
 }
-@media (prefers-color-scheme: dark) {
-.day-timeline__hour[data-v-a4d8d28d]:not(:last-child) {
-		border-color: var(--qalendar-dark-mode-line-color);
+.day-timeline__hour:first-child .day-timeline__hour-text[data-v-0b3de5c5] {
+	display: none;
 }
+.day-timeline__hour[data-v-0b3de5c5]:not(:last-child) {
+	border-bottom: var(--qalendar-border-gray-thin);
 }
 
-.week-timeline__event[data-v-489753e0] {
+.week-timeline__event[data-v-8bd51337] {
   position: relative;
   --event-padding: 3px;
   display: flex;
@@ -647,12 +658,12 @@ display: block;
   border-radius: 4px;
   padding: var(--event-padding);
   margin-bottom: 0.25em;
-  text-align: left;
+  text-align: start;
   cursor: pointer;
   user-select: none;
   overflow: hidden;
 }
-.week-timeline__event[data-v-489753e0]:active {
+.week-timeline__event[data-v-8bd51337]:active {
   cursor: not-allowed;
 }
 
@@ -678,34 +689,34 @@ display: block;
 .week-timeline__events[data-v-18ecf6c3] {
 }
 
-.calendar-week__wrapper[data-v-f1208dd2] {
+.calendar-week__wrapper[data-v-f1a405b2] {
 	position: relative;
-	padding-left: var(--qalendar-week-padding-left);
+	padding-inline-start: var(--qalendar-week-padding-left);
 	overflow-y: auto;
 }
-.calendar-week[data-v-f1208dd2] {
+.calendar-week[data-v-f1a405b2] {
 	position: relative;
 	width: 100%;
 	flex: 1 1 auto;
 }
-.calendar-week__events[data-v-f1208dd2] {
+.calendar-week__events[data-v-f1a405b2] {
 	display: flex;
 	width: 100%;
-	height: var(--7ccd10f4);
+	height: var(--65a2ac84);
 	overflow: hidden;
 }
-.calendar-week .current-time-line[data-v-f1208dd2] {
+.calendar-week .current-time-line[data-v-f1a405b2] {
 	position: absolute;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	height: 2px;
 	z-index: 1;
 	background-color: red;
 }
-.calendar-week .current-time-line__circle[data-v-f1208dd2] {
+.calendar-week .current-time-line__circle[data-v-f1a405b2] {
 	position: relative;
 }
-.calendar-week .current-time-line__circle[data-v-f1208dd2]::before {
+.calendar-week .current-time-line__circle[data-v-f1a405b2]::before {
 	content: '';
 	position: absolute;
 	transform: translate(-45%, -45%);
@@ -714,9 +725,9 @@ display: block;
 	border-radius: 50%;
 	background-color: red;
 }
-.calendar-week .custom-current-time[data-v-f1208dd2] {
+.calendar-week .custom-current-time[data-v-f1a405b2] {
 	position: absolute;
-	left: 0;
+	inset-inline-start: 0;
 	width: 100%;
 	z-index: 1;
 }
@@ -2673,13 +2684,13 @@ line-height: 1.65;
 	transform: rotateY(180deg) !important;
 }
 
-.img-web-kit[data-v-1cec7fb3] {
+.img-web-kit[data-v-367220b6] {
 	max-width: 100%;
 	vertical-align: middle;
 	border: 0;
 	width: 100%;
 }
-.error-image[data-v-1cec7fb3] {
+.error-image[data-v-367220b6] {
 	background-color: var(--skeleton-bg);
 }
 
@@ -7792,6 +7803,8 @@ to {
 }.flex {
     display: flex;
     align-items: center;
+}.display-flex {
+    display: flex;
 }.inline-flex {
     display: inline-flex;
     align-items: center;
@@ -8036,6 +8049,10 @@ to {
         display: flex !important;
     }
 
+    .m_display-flex {
+        display: flex !important;
+    }
+
     .inline-flex {
         display: inline-flex !important;
     }

package/dist/utils/index.d.ts

@@ -26,5 +26,5 @@ export * as bagelFormUtils from './BagelFormUtils';
 export { useLang } from './lang';
 export { formatString } from './strings';
 export { useDebounceFn } from '@vueuse/core';
-export declare function pathKeyToURL(pathKey?: string): string;
+export declare function pathKeyToURL(pathKey?: string): string | undefined;
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,UAK5C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAI/D,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IAAI,EAAE,IAAI,GAAE,MAAY,QAO1D;AAED,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,UAMlC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAgBnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;IAAE,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBlF;AAED,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAatD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAK5C,wBAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,MAAM,sBAO5C"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.1240",
+  "version": "0.0.1246",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Calendar/components/header/Header.vue

@@ -5,9 +5,9 @@ import type { ConfigInterface } from '../../typings/config.interface'
 import type { PeriodInterface } from '../../typings/interfaces/period.interface'
 import type { modeType } from '../../typings/types'
 
-import { DatePick, Icon, TabsNav, Btn } from '@bagelink/vue'
+import { DatePick, TabsNav, Btn } from '@bagelink/vue'
 import { ref, computed, watch } from 'vue'
-import { translate, getLanguage } from '../../language'
+import { translate } from '../../language'
 
 const props = defineProps({
 	config: {
@@ -41,33 +41,33 @@ const periodSelect = ref<InstanceType<typeof DatePick>>()
 const currentPeriod = ref(props.period)
 const modeOptions = ref<modeType[]>(['month', 'week', 'day', 'agenda'])
 
-const icons = {
-	chevronLeft: 'chevron_left',
-	chevronRight: 'chevron_right',
-}
-
-const periodName = computed(() => {
-	if (props.mode === 'week') {
-		const startMonth = props.time.getLocalizedNameOfMonth(
-			currentPeriod.value.start,
-			'short'
-		)
-		const endMonth = props.time.getLocalizedNameOfMonth(
-			currentPeriod.value.end,
-			'short'
-		)
-
-		return startMonth === endMonth
-			? startMonth
-			: `${startMonth} - ${endMonth}`
-	}
-
-	// day
-	return `${props.time.getLocalizedNameOfMonth(
-		currentPeriod.value.selectedDate,
-		'short'
-	)} ${currentPeriod.value.selectedDate.getFullYear()}`
-})
+// const icons = {
+// 	chevronLeft: 'chevron_left',
+// 	chevronRight: 'chevron_right',
+// }
+
+// const periodName = computed(() => {
+// 	if (props.mode === 'week') {
+// 		const startMonth = props.time.getLocalizedNameOfMonth(
+// 			currentPeriod.value.start,
+// 			'short'
+// 		)
+// 		const endMonth = props.time.getLocalizedNameOfMonth(
+// 			currentPeriod.value.end,
+// 			'short'
+// 		)
+
+// 		return startMonth === endMonth
+// 			? startMonth
+// 			: `${startMonth} - ${endMonth}`
+// 	}
+
+// 	// day
+// 	return `${props.time.getLocalizedNameOfMonth(
+// 		currentPeriod.value.selectedDate,
+// 		'short'
+// 	)} ${currentPeriod.value.selectedDate.getFullYear()}`
+// })
 
 const modeLocal = ref(props.mode)
 

package/src/components/Calendar/components/month/AgendaEventTile.vue

@@ -85,44 +85,51 @@ onMounted(() => {
 })
 </script>
 
+<!--  flex column align-items-start txt14 -->
 <template>
 	<div
 		:id="elementId"
-		class="agenda__event is-event rounded mb-05 pointer user-select-none p-1 flex column align-items-start"
+		class="agenda__event is-event rounded mb-05 pointer user-select-none p-1 grid gap-1"
 		@click.prevent="handleClickOnEvent"
 	>
-		<span
-			v-if="eventTime && !calendarEvent.originalEvent"
-			class="agenda__event-time"
-		>
-			<Icon :icon="icons.clock" />
-			{{ eventTime }}
-		</span>
+		<div class="flex txt14 flex column align-items-start gap-025 opacity-6">
+			<span
+				v-if="eventTime && !calendarEvent.originalEvent"
+				class="agenda__event-time flex gap-025"
+			>
+				<Icon :icon="icons.clock" :size="0.8" />
+				{{ eventTime }}
+			</span>
 
-		<span class="agenda__event-title">
-			{{ calendarEvent.title }}
-		</span>
-		<span
-			v-if="calendarEvent.with"
-			class="agenda__event-with"
-		>
-			<Icon :icon="icons.user" />
-			{{ calendarEvent.with }}
-		</span>
-
-		<span
-			v-if="calendarEvent.location"
-			class="agenda__event-location"
-		>
-			<Icon :icon="icons.location" />
-			{{ calendarEvent.location }}
-		</span>
+			<span
+				v-if="calendarEvent.location"
+				class="agenda__event-location flex gap-025"
+			>
+				<Icon :icon="icons.location" :size="1" />
+				{{ calendarEvent.location }}
+			</span>
+		</div>
+		<div>
+			<div class="agenda__event-title">
+				{{ calendarEvent.title }}
+			</div>
+			<div
+				v-if="calendarEvent.with"
+				class="agenda__event-with txt14 opacity-6"
+			>
+				<Icon :icon="icons.user" />
+				{{ calendarEvent.with }}
+			</div>
+		</div>
 	</div>
 </template>
 
 <style scoped>
 .agenda__event {
-	background-color: v-bind(eventBackgroundColor);
-	color: v-bind(eventColor);
+	border-inline-start: 0.75rem solid;
+	border-color: v-bind(eventBackgroundColor);
+	background: var(--input-bg);
+	grid-template-columns: 200px auto;
+	box-shadow: 0 0 0 1px var(--border-color);
 }
 </style>

package/src/components/Calendar/components/month/AgendaEvents.vue

@@ -6,7 +6,7 @@ import type { DayInterface } from '../../typings/interfaces/day.interface'
 import { getLanguage, languageKeys } from '../../language'
 import AgendaEventTile from './AgendaEventTile.vue'
 
-const props = defineProps({
+defineProps({
 	config: {
 		type: Object as PropType<ConfigInterface>,
 		required: true,
@@ -26,16 +26,16 @@ const emit = defineEmits(['eventWasClicked'])
 
 <template>
 	<div class="agenda__wrapper grid align-items-start gap-1 h-100p ">
-		<header class="">
+		<header class="m_sticky">
 			<div class="agenda__header-day-name txt-center ">
-				{{ day.dayName }}
+				{{ day.dayName.slice(0, 3) }}
 			</div>
 			<div class="agenda__header-date flex justify-content-center rounded p-025 txt24 line-height-04 ">
 				<!--        Here we want to display leading zero for days 1-9, in order to prevent layout shifts -->
 				{{ day.dateTimeString.substring(8, 10) }}
 			</div>
 		</header>
-		<div class="agenda__content flex column w-100p h-100p min-h-100px pt-05 border-start ps-1">
+		<div class="agenda__content flex column w-100p h-100p min-h-100px pt-05 border-start ps-1 m_pt-0 min-h-50px">
 			<div
 				v-if="day.events.length === 0"
 				class="align-items-center flex justify-content-center h-100p opacity-6"

package/src/components/Calendar/components/month/Day.vue

@@ -178,18 +178,21 @@ function emitDayWasClicked() {
   display: flex;
   flex-flow: column;
   align-items: center;
-  border-right: var(--qalendar-border-gray-thin);
+  border-inline-end: var(--qalendar-border-gray-thin);
   border-bottom: var(--qalendar-border-gray-thin);
   overflow: hidden;
   transition: background-color 0.2s ease-in-out;
 }
+.calendar-month__weekday:active {
+  background-color: var(--qalendar-light-gray);
+}
 
 .calendar-month__weekday.is-droppable {
   background-color: var(--qalendar-light-gray);
 }
 
 .calendar-month__weekday:last-child {
-  border-right: 0;
+  border-inline-end: 0;
 }
 
 .calendar-month__weekday.is-selected {
@@ -199,7 +202,7 @@ function emitDayWasClicked() {
 .calendar-month__weekday-more {
   font-size: var(--qalendar-font-2xs);
   width: 100%;
-  padding-left: 4px;
+  padding-inline-start: 4px;
   color: var(--qalendar-gray-quite-dark);
   cursor: pointer;
 }
@@ -235,13 +238,13 @@ function emitDayWasClicked() {
   display: flex;
   flex-flow: column;
   align-items: center;
-  border-right: var(--qalendar-border-gray-thin);
+  border-inline-end: var(--qalendar-border-gray-thin);
   border-bottom: var(--qalendar-border-gray-thin);
-  border-right-color: transparent;
+  border-inline-end-color: transparent;
 }
 
 .space-reserver + .calendar-month__weekday:not(.trailing-or-leading) {
-  border-left: var(--qalendar-border-gray-thin);
+  border-inline-start: var(--qalendar-border-gray-thin);
 }
 
 @media (prefers-color-scheme: dark) {