akfatimeline 2.2.2 → 2.2.4

package/dist/Timeline.js

@@ -733,6 +733,23 @@ ___CSS_LOADER_EXPORT___.push([module.id, `/* AkfaTimeline - Glassmorphism Theme
   box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-light);
 }
 
+/* Seçili custom button stili - sadece border parlar, arka plan olmaz */
+.master-header-btn-active {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  border: 2px solid var(--accent-color, #0ea5e9) !important;
+  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5), 0 0 20px rgba(14, 165, 233, 0.3) !important;
+  color: var(--text-primary) !important;
+}
+
+.master-header-btn-active:hover {
+  background: transparent !important;
+  border-color: var(--accent-color, #0ea5e9) !important;
+  box-shadow: 0 0 15px rgba(14, 165, 233, 0.7), 0 0 25px rgba(14, 165, 233, 0.4) !important;
+  transform: translateY(-2px);
+}
+
 .master-header-date-picker {
   background: var(--bg-secondary);
   backdrop-filter: var(--blur-sm);
@@ -3161,7 +3178,7 @@ const MasterHeader = _ref => {
     onClick: onToday
   }, "Bug\xFCn")), customButtons && customButtons.length > 0 && customButtons.map(button => /*#__PURE__*/external_react_default().createElement("button", {
     key: button.id,
-    className: button.className || "master-header-btn",
+    className: button.className ? "master-header-btn ".concat(button.className) : "master-header-btn",
     onClick: button.onClick,
     disabled: button.disabled,
     title: button.tooltip || button.label
@@ -3358,6 +3375,41 @@ const isDateDisabled = (date, disableDates) => {
   }
   return false;
 };
+
+/**
+ * Bir tarihin hangi açık range'e ait olduğunu bulur (mode: 'include' için)
+ * @param {string | Object | Date} date - Kontrol edilecek tarih
+ * @param {Object} disableDates - { mode: 'include', dates: [], ranges: [] }
+ * @returns {Object | null} - { start: Date, end: Date } veya null
+ */
+const findEnabledRangeForDate = (date, disableDates) => {
+  if (!disableDates || !disableDates.mode || disableDates.mode !== 'include') {
+    return null; // Sadece 'include' modu için çalışır
+  }
+  const dateObj = parseDate(date);
+  const dateOnly = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate());
+  const {
+    ranges = []
+  } = disableDates;
+
+  // Tarihin hangi range'e ait olduğunu bul
+  for (const range of ranges) {
+    const start = parseDate(range.start);
+    const end = parseDate(range.end);
+    const startOnly = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+    const endOnly = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+    if (dateOnly >= startOnly && dateOnly <= endOnly) {
+      // Bu range'e ait, range'in tamamını döndür
+      return {
+        start: startOnly,
+        end: endOnly
+      };
+    }
+  }
+
+  // Range bulunamadı, null döndür
+  return null;
+};
 ;// ./src/components/Timeline/TimelineHeader.jsx
 
  // CSS dosyasını import etmeyi unutma
@@ -4082,38 +4134,102 @@ const TimelineContent = _ref => {
     if (e.button === 2 || e.which === 3) {
       return;
     }
-    const startDate = parseDate(date.fullDate);
+    const clickedDate = parseDate(date.fullDate);
 
     // Disabled tarih kontrolü - disabled hücrelerde event oluşturmayı engelle
-    if (disableDates && isDateDisabled(startDate, disableDates)) {
+    if (disableDates && isDateDisabled(clickedDate, disableDates)) {
       return;
     }
 
     // Geçmiş tarih kontrolü
     if (preventPastEvents && preventPastEventsDate) {
       const preventPastEventsDateObj = parseDate(preventPastEventsDate);
-      // Sadece tarih karşılaştırması (saat bilgisi olmadan)
-      const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+      const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
       const preventPastEventsDateOnly = new Date(preventPastEventsDateObj.getFullYear(), preventPastEventsDateObj.getMonth(), preventPastEventsDateObj.getDate());
-      if (startDateOnly < preventPastEventsDateOnly) {
+      if (clickedDateOnly < preventPastEventsDateOnly) {
         // Geçmiş tarihe tıklama engellendi
         return;
       }
     }
+
+    // Eğer disableDates mode: 'include' ise, tıklanan tarihin range'ini veya date'ini bul
+    let startDate = clickedDate;
+    let endDate = new Date(clickedDate.getTime() + 24 * 60 * 60 * 1000); // Varsayılan: 1 gün
+    let enabledRange = null;
+    if (disableDates && disableDates.mode === 'include') {
+      // Önce ranges'te ara
+      if (disableDates.ranges && disableDates.ranges.length > 0) {
+        enabledRange = findEnabledRangeForDate(clickedDate, disableDates);
+        if (enabledRange) {
+          // Range bulundu, range'in tamamını seç
+          startDate = enabledRange.start;
+          // endDate'i direkt range'in end'i olarak kullan
+          // Range'in end'i zaten son günü temsil ediyor (inclusive)
+          endDate = enabledRange.end;
+        }
+      }
+
+      // Eğer range bulunamadıysa, dates array'inde tek tek tarih var mı kontrol et
+      if (!enabledRange && disableDates.dates && disableDates.dates.length > 0) {
+        const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
+        const foundDate = disableDates.dates.find(d => {
+          const dObj = parseDate(d);
+          const dOnly = new Date(dObj.getFullYear(), dObj.getMonth(), dObj.getDate());
+          return dOnly.getTime() === clickedDateOnly.getTime();
+        });
+        if (foundDate) {
+          // Tek bir tarih bulundu, o tarihi seç (1 günlük event)
+          const foundDateObj = parseDate(foundDate);
+          startDate = new Date(foundDateObj.getFullYear(), foundDateObj.getMonth(), foundDateObj.getDate());
+          endDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000); // 1 gün sonrası
+          enabledRange = {
+            start: startDate,
+            end: startDate
+          }; // Tek gün için range oluştur
+        }
+      }
+    }
+
+    // Event title'ını gün sayısına göre ayarla
+    const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+    const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
+    // Gün farkını hesapla (gece sayısı = gün farkı)
+    // Örnek: 31 Aralık - 5 Ocak = 5 gece (31-1, 1-2, 2-3, 3-4, 4-5)
+    const daysDiff = Math.round((endDateOnly.getTime() - startDateOnly.getTime()) / (24 * 60 * 60 * 1000));
+    const eventTitle = daysDiff > 0 ? "".concat(daysDiff, " Gece") : "1 Gece";
+
+    // Event'i oluştur - range'in tamamı seçilmiş olacak
     const newEvent = {
       id: Date.now(),
-      title: "1 Gece",
+      title: eventTitle,
       startDate,
-      endDate: new Date(startDate.getTime() + 24 * 60 * 60 * 1000),
+      endDate,
       resourceId,
-      // Mouse başlangıç pozisyonunu kaydet
+      // Mouse başlangıç pozisyonunu kaydet (sürükle-bırak devre dışı olacak)
       startX: (e === null || e === void 0 ? void 0 : e.clientX) || 0,
-      startCellIndex: dates.findIndex(d => parseDate(d.fullDate).toDateString() === startDate.toDateString()),
-      // color => var(--timeline-new-event-background-color) => => Sonra inline style yerine className
-      color: "" // Bunu .css'te "var(--timeline-new-event-background-color)" atayabilirsin
+      startCellIndex: dates.findIndex(d => {
+        const dDate = parseDate(d.fullDate);
+        const dDateOnly = new Date(dDate.getFullYear(), dDate.getMonth(), dDate.getDate());
+        const startDateOnlyCheck = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+        return dDateOnly.getTime() === startDateOnlyCheck.getTime();
+      }),
+      color: ""
     };
-    setTempEvent(newEvent);
-    setIsCreating(true);
+
+    // Event'i direkt oluştur (sürükle-bırak olmadan)
+    if (enabledRange) {
+      // Range seçildi, direkt event oluştur (sürükle-bırak devre dışı)
+      setEvents(prev => [...prev, newEvent]);
+
+      // Callback'i çağır
+      if (onCreateEventInfo) {
+        onCreateEventInfo(newEvent);
+      }
+    } else {
+      // Range bulunamadı, eski davranış (sürükle-bırak ile seçim)
+      setTempEvent(newEvent);
+      setIsCreating(true);
+    }
   };
   (0,external_react_.useEffect)(() => {
     if (!createNewEventOn) return;

package/dist/components/Timeline/MasterHeader.jsx

@@ -66,7 +66,7 @@ const MasterHeader = ({
         {customButtons && customButtons.length > 0 && customButtons.map((button) => (
           <button
             key={button.id}
-            className={button.className || "master-header-btn"}
+            className={button.className ? `master-header-btn ${button.className}` : "master-header-btn"}
             onClick={button.onClick}
             disabled={button.disabled}
             title={button.tooltip || button.label}

package/dist/components/Timeline/Timeline.css

@@ -704,6 +704,23 @@
   box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-light);
 }
 
+/* Seçili custom button stili - sadece border parlar, arka plan olmaz */
+.master-header-btn-active {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  border: 2px solid var(--accent-color, #0ea5e9) !important;
+  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5), 0 0 20px rgba(14, 165, 233, 0.3) !important;
+  color: var(--text-primary) !important;
+}
+
+.master-header-btn-active:hover {
+  background: transparent !important;
+  border-color: var(--accent-color, #0ea5e9) !important;
+  box-shadow: 0 0 15px rgba(14, 165, 233, 0.7), 0 0 25px rgba(14, 165, 233, 0.4) !important;
+  transform: translateY(-2px);
+}
+
 .master-header-date-picker {
   background: var(--bg-secondary);
   backdrop-filter: var(--blur-sm);

package/dist/components/Timeline/TimelineContent.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
-import { parseDate, isDateDisabled } from "../../utils/dateUtils";
+import { parseDate, isDateDisabled, findEnabledRangeForDate } from "../../utils/dateUtils";
 import useDragAndDrop from "../../hooks/useDragAndDrop";
 import useEventDragDrop from "../../hooks/useEventDragDrop";
 import Indicator from "./Indicator.jsx";
@@ -202,40 +202,102 @@ const TimelineContent = ({
       return;
     }
 
-    const startDate = parseDate(date.fullDate);
+    const clickedDate = parseDate(date.fullDate);
     
     // Disabled tarih kontrolü - disabled hücrelerde event oluşturmayı engelle
-    if (disableDates && isDateDisabled(startDate, disableDates)) {
+    if (disableDates && isDateDisabled(clickedDate, disableDates)) {
       return;
     }
     
     // Geçmiş tarih kontrolü
     if (preventPastEvents && preventPastEventsDate) {
       const preventPastEventsDateObj = parseDate(preventPastEventsDate);
-      // Sadece tarih karşılaştırması (saat bilgisi olmadan)
-      const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+      const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
       const preventPastEventsDateOnly = new Date(preventPastEventsDateObj.getFullYear(), preventPastEventsDateObj.getMonth(), preventPastEventsDateObj.getDate());
       
-      if (startDateOnly < preventPastEventsDateOnly) {
+      if (clickedDateOnly < preventPastEventsDateOnly) {
         // Geçmiş tarihe tıklama engellendi
         return;
       }
     }
 
+    // Eğer disableDates mode: 'include' ise, tıklanan tarihin range'ini veya date'ini bul
+    let startDate = clickedDate;
+    let endDate = new Date(clickedDate.getTime() + 24 * 60 * 60 * 1000); // Varsayılan: 1 gün
+    let enabledRange = null;
+    
+    if (disableDates && disableDates.mode === 'include') {
+      // Önce ranges'te ara
+      if (disableDates.ranges && disableDates.ranges.length > 0) {
+        enabledRange = findEnabledRangeForDate(clickedDate, disableDates);
+        if (enabledRange) {
+          // Range bulundu, range'in tamamını seç
+          startDate = enabledRange.start;
+          // endDate'i direkt range'in end'i olarak kullan
+          // Range'in end'i zaten son günü temsil ediyor (inclusive)
+          endDate = enabledRange.end;
+        }
+      }
+      
+      // Eğer range bulunamadıysa, dates array'inde tek tek tarih var mı kontrol et
+      if (!enabledRange && disableDates.dates && disableDates.dates.length > 0) {
+        const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
+        const foundDate = disableDates.dates.find((d) => {
+          const dObj = parseDate(d);
+          const dOnly = new Date(dObj.getFullYear(), dObj.getMonth(), dObj.getDate());
+          return dOnly.getTime() === clickedDateOnly.getTime();
+        });
+        
+        if (foundDate) {
+          // Tek bir tarih bulundu, o tarihi seç (1 günlük event)
+          const foundDateObj = parseDate(foundDate);
+          startDate = new Date(foundDateObj.getFullYear(), foundDateObj.getMonth(), foundDateObj.getDate());
+          endDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000); // 1 gün sonrası
+          enabledRange = { start: startDate, end: startDate }; // Tek gün için range oluştur
+        }
+      }
+    }
+
+    // Event title'ını gün sayısına göre ayarla
+    const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+    const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
+    // Gün farkını hesapla (gece sayısı = gün farkı)
+    // Örnek: 31 Aralık - 5 Ocak = 5 gece (31-1, 1-2, 2-3, 3-4, 4-5)
+    const daysDiff = Math.round((endDateOnly.getTime() - startDateOnly.getTime()) / (24 * 60 * 60 * 1000));
+    const eventTitle = daysDiff > 0 ? `${daysDiff} Gece` : "1 Gece";
+    
+    // Event'i oluştur - range'in tamamı seçilmiş olacak
     const newEvent = {
       id: Date.now(),
-      title: "1 Gece",
+      title: eventTitle,
       startDate,
-      endDate: new Date(startDate.getTime() + 24 * 60 * 60 * 1000),
+      endDate,
       resourceId,
-      // Mouse başlangıç pozisyonunu kaydet
+      // Mouse başlangıç pozisyonunu kaydet (sürükle-bırak devre dışı olacak)
       startX: e?.clientX || 0,
-      startCellIndex: dates.findIndex((d) => parseDate(d.fullDate).toDateString() === startDate.toDateString()),
-      // color => var(--timeline-new-event-background-color) => => Sonra inline style yerine className
-      color: "", // Bunu .css'te "var(--timeline-new-event-background-color)" atayabilirsin
+      startCellIndex: dates.findIndex((d) => {
+        const dDate = parseDate(d.fullDate);
+        const dDateOnly = new Date(dDate.getFullYear(), dDate.getMonth(), dDate.getDate());
+        const startDateOnlyCheck = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+        return dDateOnly.getTime() === startDateOnlyCheck.getTime();
+      }),
+      color: "",
     };
-    setTempEvent(newEvent);
-    setIsCreating(true);
+    
+    // Event'i direkt oluştur (sürükle-bırak olmadan)
+    if (enabledRange) {
+      // Range seçildi, direkt event oluştur (sürükle-bırak devre dışı)
+      setEvents((prev) => [...prev, newEvent]);
+      
+      // Callback'i çağır
+      if (onCreateEventInfo) {
+        onCreateEventInfo(newEvent);
+      }
+    } else {
+      // Range bulunamadı, eski davranış (sürükle-bırak ile seçim)
+      setTempEvent(newEvent);
+      setIsCreating(true);
+    }
   };
 
   useEffect(() => {

package/dist/utils/dateUtils.js

@@ -95,3 +95,39 @@ export const isDateDisabled = (date, disableDates) => {
   
   return false;
 };
+
+/**
+ * Bir tarihin hangi açık range'e ait olduğunu bulur (mode: 'include' için)
+ * @param {string | Object | Date} date - Kontrol edilecek tarih
+ * @param {Object} disableDates - { mode: 'include', dates: [], ranges: [] }
+ * @returns {Object | null} - { start: Date, end: Date } veya null
+ */
+export const findEnabledRangeForDate = (date, disableDates) => {
+  if (!disableDates || !disableDates.mode || disableDates.mode !== 'include') {
+    return null; // Sadece 'include' modu için çalışır
+  }
+
+  const dateObj = parseDate(date);
+  const dateOnly = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate());
+  
+  const { ranges = [] } = disableDates;
+  
+  // Tarihin hangi range'e ait olduğunu bul
+  for (const range of ranges) {
+    const start = parseDate(range.start);
+    const end = parseDate(range.end);
+    const startOnly = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+    const endOnly = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+    
+    if (dateOnly >= startOnly && dateOnly <= endOnly) {
+      // Bu range'e ait, range'in tamamını döndür
+      return {
+        start: startOnly,
+        end: endOnly,
+      };
+    }
+  }
+  
+  // Range bulunamadı, null döndür
+  return null;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfatimeline",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "A customizable timeline component for React applications with disableDates, custom header buttons, and past date protection features",
   "main": "./src/library.js",
   "module": "./src/library.js",

package/src/App.js

@@ -9,10 +9,10 @@ const App = () => {
   const todayDate = new Date(today.getFullYear(), today.getMonth(), today.getDate());
   
   // Timeline'ın gösterileceği tarih state'i
+  // Test için 31 Aralık 2025 civarına ayarladık (disable dates testi için)
   const [programDate, setProgramDate] = useState(() => {
-    const date = new Date();
-    date.setDate(date.getDate() - 3); // 3 gün öncesinden başla
-    return date.toISOString().split('T')[0]; // YYYY-MM-DD formatı
+    // Test için 31 Aralık 2025'ten 3 gün öncesinden başla (28 Aralık)
+    return '2025-12-28'; // YYYY-MM-DD formatı
   });
   
   // Geçmiş tarih koruması için minimum tarih (programDate ve indicatorDate'ten bağımsız)
@@ -42,8 +42,18 @@ const App = () => {
   // Loading State
   const [isLoading, setIsLoading] = useState(false);
   
-  // Disable Dates kaldırıldı - Tüm tarihler açık
-  const disableDates = null;
+  // Disable Dates - Test için: 31 Aralık - 5 Ocak arası açık, geri kalan her yer disabled
+  // mode: 'include' = belirtilen tarihler ve aralıklar enabled (diğerleri disabled)
+  const disableDates = {
+    mode: 'include', // Belirtilen tarihler ve aralıklar enabled, diğerleri disabled
+    dates: [], // Tekil tarihler (şimdilik boş)
+    ranges: [
+      {
+        start: '2025-12-31', // 31 Aralık 2025
+        end: '2026-01-05',    // 5 Ocak 2026
+      },
+    ],
+  };
   
   // Cell Tooltip için örnek fiyat verisi
   // Her gün için farklı fiyatlar tanımlanabilir

package/src/components/Timeline/MasterHeader.jsx

@@ -66,7 +66,7 @@ const MasterHeader = ({
         {customButtons && customButtons.length > 0 && customButtons.map((button) => (
           <button
             key={button.id}
-            className={button.className || "master-header-btn"}
+            className={button.className ? `master-header-btn ${button.className}` : "master-header-btn"}
             onClick={button.onClick}
             disabled={button.disabled}
             title={button.tooltip || button.label}

package/src/components/Timeline/Timeline.css

@@ -704,6 +704,23 @@
   box-shadow: var(--shadow-md), 0 0 0 3px var(--accent-light);
 }
 
+/* Seçili custom button stili - sadece border parlar, arka plan olmaz */
+.master-header-btn-active {
+  background: transparent !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+  border: 2px solid var(--accent-color, #0ea5e9) !important;
+  box-shadow: 0 0 10px rgba(14, 165, 233, 0.5), 0 0 20px rgba(14, 165, 233, 0.3) !important;
+  color: var(--text-primary) !important;
+}
+
+.master-header-btn-active:hover {
+  background: transparent !important;
+  border-color: var(--accent-color, #0ea5e9) !important;
+  box-shadow: 0 0 15px rgba(14, 165, 233, 0.7), 0 0 25px rgba(14, 165, 233, 0.4) !important;
+  transform: translateY(-2px);
+}
+
 .master-header-date-picker {
   background: var(--bg-secondary);
   backdrop-filter: var(--blur-sm);

package/src/components/Timeline/TimelineContent.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useEffect, useCallback } from "react";
-import { parseDate, isDateDisabled } from "../../utils/dateUtils";
+import { parseDate, isDateDisabled, findEnabledRangeForDate } from "../../utils/dateUtils";
 import useDragAndDrop from "../../hooks/useDragAndDrop";
 import useEventDragDrop from "../../hooks/useEventDragDrop";
 import Indicator from "./Indicator.jsx";
@@ -202,40 +202,102 @@ const TimelineContent = ({
       return;
     }
 
-    const startDate = parseDate(date.fullDate);
+    const clickedDate = parseDate(date.fullDate);
     
     // Disabled tarih kontrolü - disabled hücrelerde event oluşturmayı engelle
-    if (disableDates && isDateDisabled(startDate, disableDates)) {
+    if (disableDates && isDateDisabled(clickedDate, disableDates)) {
       return;
     }
     
     // Geçmiş tarih kontrolü
     if (preventPastEvents && preventPastEventsDate) {
       const preventPastEventsDateObj = parseDate(preventPastEventsDate);
-      // Sadece tarih karşılaştırması (saat bilgisi olmadan)
-      const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+      const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
       const preventPastEventsDateOnly = new Date(preventPastEventsDateObj.getFullYear(), preventPastEventsDateObj.getMonth(), preventPastEventsDateObj.getDate());
       
-      if (startDateOnly < preventPastEventsDateOnly) {
+      if (clickedDateOnly < preventPastEventsDateOnly) {
         // Geçmiş tarihe tıklama engellendi
         return;
       }
     }
 
+    // Eğer disableDates mode: 'include' ise, tıklanan tarihin range'ini veya date'ini bul
+    let startDate = clickedDate;
+    let endDate = new Date(clickedDate.getTime() + 24 * 60 * 60 * 1000); // Varsayılan: 1 gün
+    let enabledRange = null;
+    
+    if (disableDates && disableDates.mode === 'include') {
+      // Önce ranges'te ara
+      if (disableDates.ranges && disableDates.ranges.length > 0) {
+        enabledRange = findEnabledRangeForDate(clickedDate, disableDates);
+        if (enabledRange) {
+          // Range bulundu, range'in tamamını seç
+          startDate = enabledRange.start;
+          // endDate'i direkt range'in end'i olarak kullan
+          // Range'in end'i zaten son günü temsil ediyor (inclusive)
+          endDate = enabledRange.end;
+        }
+      }
+      
+      // Eğer range bulunamadıysa, dates array'inde tek tek tarih var mı kontrol et
+      if (!enabledRange && disableDates.dates && disableDates.dates.length > 0) {
+        const clickedDateOnly = new Date(clickedDate.getFullYear(), clickedDate.getMonth(), clickedDate.getDate());
+        const foundDate = disableDates.dates.find((d) => {
+          const dObj = parseDate(d);
+          const dOnly = new Date(dObj.getFullYear(), dObj.getMonth(), dObj.getDate());
+          return dOnly.getTime() === clickedDateOnly.getTime();
+        });
+        
+        if (foundDate) {
+          // Tek bir tarih bulundu, o tarihi seç (1 günlük event)
+          const foundDateObj = parseDate(foundDate);
+          startDate = new Date(foundDateObj.getFullYear(), foundDateObj.getMonth(), foundDateObj.getDate());
+          endDate = new Date(startDate.getTime() + 24 * 60 * 60 * 1000); // 1 gün sonrası
+          enabledRange = { start: startDate, end: startDate }; // Tek gün için range oluştur
+        }
+      }
+    }
+
+    // Event title'ını gün sayısına göre ayarla
+    const startDateOnly = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+    const endDateOnly = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate());
+    // Gün farkını hesapla (gece sayısı = gün farkı)
+    // Örnek: 31 Aralık - 5 Ocak = 5 gece (31-1, 1-2, 2-3, 3-4, 4-5)
+    const daysDiff = Math.round((endDateOnly.getTime() - startDateOnly.getTime()) / (24 * 60 * 60 * 1000));
+    const eventTitle = daysDiff > 0 ? `${daysDiff} Gece` : "1 Gece";
+    
+    // Event'i oluştur - range'in tamamı seçilmiş olacak
     const newEvent = {
       id: Date.now(),
-      title: "1 Gece",
+      title: eventTitle,
       startDate,
-      endDate: new Date(startDate.getTime() + 24 * 60 * 60 * 1000),
+      endDate,
       resourceId,
-      // Mouse başlangıç pozisyonunu kaydet
+      // Mouse başlangıç pozisyonunu kaydet (sürükle-bırak devre dışı olacak)
       startX: e?.clientX || 0,
-      startCellIndex: dates.findIndex((d) => parseDate(d.fullDate).toDateString() === startDate.toDateString()),
-      // color => var(--timeline-new-event-background-color) => => Sonra inline style yerine className
-      color: "", // Bunu .css'te "var(--timeline-new-event-background-color)" atayabilirsin
+      startCellIndex: dates.findIndex((d) => {
+        const dDate = parseDate(d.fullDate);
+        const dDateOnly = new Date(dDate.getFullYear(), dDate.getMonth(), dDate.getDate());
+        const startDateOnlyCheck = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate());
+        return dDateOnly.getTime() === startDateOnlyCheck.getTime();
+      }),
+      color: "",
     };
-    setTempEvent(newEvent);
-    setIsCreating(true);
+    
+    // Event'i direkt oluştur (sürükle-bırak olmadan)
+    if (enabledRange) {
+      // Range seçildi, direkt event oluştur (sürükle-bırak devre dışı)
+      setEvents((prev) => [...prev, newEvent]);
+      
+      // Callback'i çağır
+      if (onCreateEventInfo) {
+        onCreateEventInfo(newEvent);
+      }
+    } else {
+      // Range bulunamadı, eski davranış (sürükle-bırak ile seçim)
+      setTempEvent(newEvent);
+      setIsCreating(true);
+    }
   };
 
   useEffect(() => {

package/src/utils/dateUtils.js

@@ -95,3 +95,39 @@ export const isDateDisabled = (date, disableDates) => {
   
   return false;
 };
+
+/**
+ * Bir tarihin hangi açık range'e ait olduğunu bulur (mode: 'include' için)
+ * @param {string | Object | Date} date - Kontrol edilecek tarih
+ * @param {Object} disableDates - { mode: 'include', dates: [], ranges: [] }
+ * @returns {Object | null} - { start: Date, end: Date } veya null
+ */
+export const findEnabledRangeForDate = (date, disableDates) => {
+  if (!disableDates || !disableDates.mode || disableDates.mode !== 'include') {
+    return null; // Sadece 'include' modu için çalışır
+  }
+
+  const dateObj = parseDate(date);
+  const dateOnly = new Date(dateObj.getFullYear(), dateObj.getMonth(), dateObj.getDate());
+  
+  const { ranges = [] } = disableDates;
+  
+  // Tarihin hangi range'e ait olduğunu bul
+  for (const range of ranges) {
+    const start = parseDate(range.start);
+    const end = parseDate(range.end);
+    const startOnly = new Date(start.getFullYear(), start.getMonth(), start.getDate());
+    const endOnly = new Date(end.getFullYear(), end.getMonth(), end.getDate());
+    
+    if (dateOnly >= startOnly && dateOnly <= endOnly) {
+      // Bu range'e ait, range'in tamamını döndür
+      return {
+        start: startOnly,
+        end: endOnly,
+      };
+    }
+  }
+  
+  // Range bulunamadı, null döndür
+  return null;
+};