diff --git a/backend/static/css/components/rightbar-calendar.css b/backend/static/css/components/rightbar-calendar.css
new file mode 100644
index 00000000..860a354a
--- /dev/null
+++ b/backend/static/css/components/rightbar-calendar.css
@@ -0,0 +1,306 @@
+/**
+ * Rightbar Calendar Component
+ *
+ * Стили для компонента правой панели с календарем
+ * Включает стили для FullCalendar, вертикальной ленты недели и модалов событий
+ */
+
+/* ====== БАЗА ====== */
+.calendar-wrap{
+ min-height: 360px;
+ border-radius: 10px;
+ overflow: hidden;
+ background: var(--bs-body-bg);
+ box-shadow: inset 0 1px 3px color-mix(in srgb, var(--bs-body-color), transparent 92%);
+ border: 0;
+}
+
+.rightbar-card{
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ border-radius: 16px;
+ overflow: hidden;
+ border: 1px solid color-mix(in srgb, var(--bs-border-color), transparent 10%);
+ background: var(--bs-body-bg);
+ box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.08);
+ min-height: 0;
+}
+
+.rightbar-card .card-header{
+ flex: 0 0 auto;
+ background: var(--bs-tertiary-bg);
+ border-bottom: 1px solid var(--bs-border-color);
+ padding: .6rem .9rem;
+}
+
+.rightbar-card .card-body{
+ flex: 1 1 auto;
+ min-height: 0;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ padding: .75rem;
+}
+
+@media (min-width: 992px){
+ .rightbar{
+ position: sticky;
+ top: var(--navbar-h);
+ height: calc(100dvh - var(--navbar-h));
+ padding: 1rem 1rem 1rem .75rem;
+ overflow: hidden;
+ }
+}
+
+/* ====== FullCalendar — компактно ====== */
+.fc{
+ font-size: 0.7rem;
+ --fc-border-color: var(--bs-border-color);
+ --fc-page-bg-color: transparent;
+ --fc-neutral-bg-color: transparent;
+ --fc-today-bg-color: color-mix(in srgb, var(--bs-primary), transparent 85%);
+ --fc-event-bg-color: var(--bs-primary);
+ --fc-event-border-color: var(--bs-primary);
+ --fc-event-text-color: var(--bs-body-bg);
+}
+
+.fc-theme-standard .fc-scrollgrid{
+ border: 0 !important;
+}
+
+.fc-theme-standard td,
+.fc-theme-standard th{
+ border: 0 !important;
+}
+
+.fc .fc-toolbar{
+ padding: .7rem .9rem;
+ background: var(--bs-tertiary-bg);
+ border-bottom: 1px solid var(--bs-border-color);
+ justify-content: space-between;
+}
+
+.fc .fc-toolbar-title{
+ font-size: 1rem;
+ font-weight: 600;
+ color: var(--bs-body-color);
+}
+
+.fc .fc-button{
+ border-radius: 8px;
+ font-size: .82rem;
+ padding: .25rem .5rem;
+ background: transparent;
+ border: none;
+ color: var(--bs-primary);
+}
+
+.fc .fc-button:hover{
+ background: rgba(var(--bs-primary-rgb), .1);
+}
+
+.fc .fc-daygrid-day-frame{
+ padding: 2px 3px !important;
+}
+
+.fc .fc-daygrid-day-number{
+ font-size: .82rem;
+ width: 100%;
+ height: 1.6rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: 600;
+ color: var(--bs-body-color);
+ text-decoration: none !important;
+}
+
+.fc .fc-day-today{
+ background: none !important;
+}
+
+.fc .fc-day-today .fc-daygrid-day-number{
+ color: var(--bs-primary);
+ font-weight: 700;
+ border: 1px solid var(--bs-primary);
+ border-radius: 50%;
+}
+
+.fc .fc-day-other .fc-daygrid-day-number{
+ opacity: .4;
+}
+
+.fc .fc-daygrid-day-events{
+ padding: 0 2px 2px !important;
+ row-gap: 2px !important;
+}
+
+.fc .fc-daygrid-event-harness{
+ margin: 0 0 2px 0 !important;
+}
+
+.fc .fc-daygrid-event .fc-event-time{
+ display: none !important;
+}
+
+.fc .fc-daygrid-event{
+ border-radius: 6px;
+ padding: .1rem .25rem !important;
+ line-height: 1.02 !important;
+ background: color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 75%);
+ border: 1px solid color-mix(in srgb, var(--bs-primary), transparent 60%);
+ color: var(--bs-body-color);
+}
+
+.fc .fc-daygrid-event .fc-event-title{
+ font-size: .62rem !important;
+ line-height: 1.02 !important;
+ letter-spacing: -0.2px;
+ font-weight: 600;
+ font-family: "Arial Narrow","Roboto Condensed",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+ display: -webkit-box !important;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden !important;
+ white-space: normal !important;
+ text-overflow: ellipsis;
+ max-height: calc(1.02em * 3);
+}
+
+/* ====== Вертикальная лента недели ====== */
+.week-strip-header{
+ margin-top: .6rem;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--bs-secondary-color);
+ font-size: .8rem;
+}
+
+.week-vertical{
+ margin-top: .6rem;
+ display: flex;
+ flex-direction: column;
+ gap: .4rem;
+}
+
+.week-vertical .week-row{
+ display: grid;
+ grid-template-columns: 56px 1fr;
+ align-items: start;
+ gap: .6rem;
+ padding: .5rem .6rem;
+ border-radius: 12px;
+ background: color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 86%);
+ border: 1px solid color-mix(in srgb, var(--bs-primary), transparent 70%);
+}
+
+.week-vertical .week-row:hover{
+ background: color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 82%);
+}
+
+.date-badge{
+ display: grid;
+ place-items: center;
+ border-radius: 10px;
+ padding: .35rem .25rem;
+ background: color-mix(in srgb, var(--bs-primary), var(--bs-body-bg) 92%);
+ border: 1px solid color-mix(in srgb, var(--bs-primary), transparent 75%);
+ text-align: center;
+ line-height: 1.05;
+}
+
+.date-badge .dow{
+ font-size: .7rem;
+ font-weight: 700;
+ color: var(--bs-primary);
+ text-transform: uppercase;
+}
+
+.date-badge .md {
+ font-size: .74rem;
+ font-weight: 700;
+ color: var(--bs-body-color);
+}
+
+.week-vertical .content .title{
+ font-size: .8rem;
+ font-weight: 600;
+ color: var(--bs-body-color);
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: normal;
+}
+
+.week-vertical .content .meta{
+ margin-top: .15rem;
+ font-size: .72rem;
+ color: var(--bs-secondary-color);
+}
+
+/* Offcanvas (мобайл) */
+#rightbarOffcanvas{
+ height: 100dvh;
+ height: 100svh;
+}
+
+#rightbarOffcanvas .offcanvas-body{
+ display: flex;
+ flex-direction: column;
+ gap: .6rem;
+ height: calc(100dvh - var(--rb-offcanvas-head, 56px));
+ height: calc(100svh - var(--rb-offcanvas-head, 56px));
+ min-height: 0;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ overscroll-behavior: contain;
+}
+
+#rightbarOffcanvas .calendar-wrap{
+ flex: 0 0 auto;
+}
+
+#rightbarOffcanvas .week-vertical{
+ flex: 0 0 auto;
+}
+
+.calendar-fab{
+ position: fixed;
+ right: 1rem;
+ bottom: 1rem;
+ z-index: 1060;
+ width: 52px;
+ height: 52px;
+ border-radius: 9999px;
+ box-shadow: 0 8px 24px rgba(0,0,0,.18);
+}
+
+/* ====== Color picker (palette) ====== */
+.color-swatch{
+ width: 26px;
+ height: 26px;
+ border: 1px solid var(--bs-border-color);
+ border-radius: 9999px;
+ padding: 0;
+ cursor: pointer;
+ background: transparent;
+}
+
+.color-swatch.active{
+ outline: 2px solid var(--bs-primary);
+ outline-offset: 2px;
+}
+
+/* ====== Event details modal ====== */
+.color-dot{
+ width: 12px;
+ height: 12px;
+ border-radius: 9999px;
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: 6px;
+ border: 1px solid #00000022;
+}
diff --git a/backend/templates/includes/rightbar_calendar.html b/backend/templates/includes/rightbar_calendar.html
index 86586eb4..90750bbd 100644
--- a/backend/templates/includes/rightbar_calendar.html
+++ b/backend/templates/includes/rightbar_calendar.html
@@ -1,138 +1,5 @@
{% load static %}
-
-
+
{# десктопная правая колонка #}