akfatimeline 2.2.4 → 2.2.6

package/dist/Timeline.js

@@ -4002,7 +4002,13 @@ const TimelineContent = _ref => {
     // Context menu açıldığında çağrılacak callback
 
     // Disable Dates
-    disableDates = null // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+    disableDates = null,
+    // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+
+    // Auto Select Enabled Range
+    autoSelectEnabledRange = false,
+    // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+    autoSelectRanges = null // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
   } = _ref;
   // ------------------- HOOKS & STATE -------------------
   const containerRef = (0,external_react_.useRef)(null);
@@ -4235,7 +4241,6 @@ const TimelineContent = _ref => {
     if (!createNewEventOn) return;
     if (!isCreating) return;
     if (mode === "extend") {
-      console.log(">>> 'extend' mode, skip new event creation");
       return;
     }
     const handleMouseMove = e => {
@@ -4393,16 +4398,10 @@ const TimelineContent = _ref => {
 
   // ------------------- Drag Logic -------------------
   const handleDragStartSafe = (e, eventId) => {
-    console.log("[TimelineContent] handleDragStartSafe called:", {
-      eventId,
-      eventsDragOn
-    });
     if (!eventsDragOn) {
-      console.log("[TimelineContent] Events drag is disabled, preventing drag start");
       e.preventDefault();
       return;
     }
-    console.log("[TimelineContent] Calling handleDragStart...");
     handleDragStart(e, eventId);
   };
   const handleDragEndSafe = e => {
@@ -4417,7 +4416,6 @@ const TimelineContent = _ref => {
   const handleMouseDownExtend = (mouseEvent, event) => {
     if (!eventsExtendOn) return;
     mouseEvent.stopPropagation();
-    console.log(">>> Extend start ID:", event.id);
     setMode("extend");
     setExtendingEvent(event);
     setOriginalEndDate(event.endDate);
@@ -4437,7 +4435,6 @@ const TimelineContent = _ref => {
     }) : evt));
   }, [mode, extendingEvent, eventsExtendOn, originalEndDate, startMouseX, setEvents]);
   const handleMouseUpExtend = (0,external_react_.useCallback)(() => {
-    console.log(">>> Extend finished ID:", extendingEvent === null || extendingEvent === void 0 ? void 0 : extendingEvent.id);
     if (onExtendInfo && extendingEvent) {
       // callback
       const updatedEvent = events.find(ev => ev.id === extendingEvent.id);
@@ -4584,15 +4581,6 @@ const TimelineContent = _ref => {
       const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
       const preventPastEventsDateOnly = new Date(preventPastEventsDateObj.getFullYear(), preventPastEventsDateObj.getMonth(), preventPastEventsDateObj.getDate());
       isPastDate = cellDateOnly < preventPastEventsDateOnly;
-      // Debug: İlk birkaç hücre için log
-      if (colIndex < 3 && groupIndex === 0) {
-        console.log('[TimelineContent] Past date check:', {
-          cellDate: cellDateOnly.toISOString().split('T')[0],
-          preventPastEventsDateValue: preventPastEventsDateOnly.toISOString().split('T')[0],
-          isPastDate,
-          preventPastEvents
-        });
-      }
     }
 
     // Disabled tarih kontrolü
@@ -4706,7 +4694,6 @@ const TimelineContent = _ref => {
             e.preventDefault();
             return;
           }
-          console.log("[TimelineContent] Event drag start:", event.id);
           handleDragStart(e, event.id);
           e.stopPropagation();
 
@@ -4775,15 +4762,6 @@ const TimelineContent = _ref => {
         const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
         const preventPastEventsDateOnly = new Date(preventPastEventsDateObj.getFullYear(), preventPastEventsDateObj.getMonth(), preventPastEventsDateObj.getDate());
         isPastDate = cellDateOnly < preventPastEventsDateOnly;
-        // Debug: İlk birkaç hücre için log
-        if (colIndex < 3 && rowIndex === 0 && groupIndex === 0) {
-          console.log('[TimelineContent] Cell past date check:', {
-            cellDate: cellDateOnly.toISOString().split('T')[0],
-            preventPastEventsDateValue: preventPastEventsDateOnly.toISOString().split('T')[0],
-            isPastDate,
-            preventPastEvents
-          });
-        }
       }
 
       // Hafta sonu kontrolü
@@ -4865,7 +4843,6 @@ const TimelineContent = _ref => {
           }
           e.preventDefault();
           e.stopPropagation();
-          console.log("[TimelineContent] onDragOver called for resource:", resource.id);
           handleDragOver(e);
         },
         onDrop: e => {
@@ -4878,7 +4855,6 @@ const TimelineContent = _ref => {
           }
           e.preventDefault();
           e.stopPropagation();
-          console.log("[TimelineContent] onDrop called for resource:", resource.id, "date:", dateObj.fullDate);
           handleDrop(e, resource.id, parseDate(dateObj.fullDate));
         }
       });
@@ -5980,10 +5956,18 @@ const Timeline_Timeline_Timeline = _ref => {
     // Özelleştirilebilir tuş haritası
 
     // Disable Dates
-    disableDates = null // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+    disableDates = null,
+    // { mode: 'exclude' | 'include', dates: [], ranges: [] }
     // mode: 'exclude' = belirtilen tarihler disabled, 'include' = belirtilen tarihler enabled (diğerleri disabled)
     // dates: ['2025-01-15', '2025-01-20', ...] veya [Date, Date, ...] - Tekil tarihler
     // ranges: [{ start: '2025-01-15', end: '2025-01-20' }, ...] veya [{ start: Date, end: Date }, ...] - Tarih aralıkları
+
+    // Auto Select Enabled Range
+    autoSelectEnabledRange = false,
+    // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+    autoSelectRanges = null // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
+    // autoSelectRanges tanımlı olduğunda, tıklanan tarih bu range'lerden birinin içindeyse otomatik olarak tüm range seçilir
+    // autoSelectRanges: null ise ve disableDates mode: 'include' ise, disableDates.ranges kullanılır (geriye dönük uyumluluk)
   } = _ref;
   // ---------------------------------------------------------
   // 1) timelineData oluştur (dates, monthHeaders vs.)
@@ -6013,6 +5997,13 @@ const Timeline_Timeline_Timeline = _ref => {
   // ---------------------------------------------------------
   const [collapsedGroups, setCollapsedGroups] = (0,external_react_.useState)({});
 
+  // Internal zoom state - eğer setZoomLevel prop'u yoksa kullanılır
+  const [internalZoomLevel, setInternalZoomLevel] = (0,external_react_.useState)(zoomLevel);
+
+  // Effective zoom level - prop varsa prop'u kullan, yoksa internal state'i kullan
+  const effectiveZoomLevel = setZoomLevel ? zoomLevel : internalZoomLevel;
+  const effectiveSetZoomLevel = setZoomLevel || setInternalZoomLevel;
+
   // Event Management
   const eventManagement = hooks_useEventManagement(events, newEvents => {
     setLocalEvents(newEvents);
@@ -6063,9 +6054,17 @@ const Timeline_Timeline_Timeline = _ref => {
   //    Container genişliği = dayRange * cellWidth
   // ---------------------------------------------------------
   const baseCellWidth = 56.95; // Temel hücre genişliği (zoom = 1.0 için)
-  const cellWidth = baseCellWidth * zoomLevel; // Zoom seviyesine göre hücre genişliği
+  const cellWidth = baseCellWidth * effectiveZoomLevel; // Zoom seviyesine göre hücre genişliği
   const containerWidth = dayRange * cellWidth;
 
+  // Internal zoom state'i prop'tan gelen zoomLevel ile senkronize et
+  (0,external_react_.useEffect)(() => {
+    if (setZoomLevel) {
+      // Prop'tan gelen zoomLevel kullanılıyor, internal state'i güncelle
+      setInternalZoomLevel(zoomLevel);
+    }
+  }, [zoomLevel, setZoomLevel]);
+
   // ---------------------------------------------------------
   // 4) Touch Gestures (Mobil desteği)
   // ---------------------------------------------------------
@@ -6162,11 +6161,16 @@ const Timeline_Timeline_Timeline = _ref => {
     setSelectedDate(new Date(newDate));
   };
   const handleToday = () => {
-    const today = programDate ? new Date(programDate) : new Date();
-    today.setDate(today.getDate() - 3); // Program tarihinden 3 gün öncesini ayarla
+    // Bugünün tarihini al
+    const today = new Date();
+    today.setDate(today.getDate() - 3); // Bugünden 3 gün öncesini ayarla
     setSelectedDate(today);
-    // App.js'teki callback'i de çağır
-    if (onToday) onToday();
+
+    // onToday callback'i bir fonksiyon ise çağır
+    // Eğer onToday bir string (tarih) ise veya başka bir değer ise, sadece setSelectedDate yeterli
+    if (typeof onToday === 'function') {
+      onToday();
+    }
   };
   const handleAdvance = () => {
     setSelectedDate(prev => new Date(prev.getTime() + 5 * 24 * 60 * 60 * 1000));
@@ -6205,15 +6209,15 @@ const Timeline_Timeline_Timeline = _ref => {
   // 8.5) Zoom handlers
   // ---------------------------------------------------------
   const handleZoomIn = (0,external_react_.useCallback)(() => {
-    if (setZoomLevel && zoomOn) {
-      setZoomLevel(prev => Math.min(maxZoomLevel, prev + zoomStep));
+    if (zoomOn) {
+      effectiveSetZoomLevel(prev => Math.min(maxZoomLevel, prev + zoomStep));
     }
-  }, [setZoomLevel, zoomOn, maxZoomLevel, zoomStep]);
+  }, [zoomOn, maxZoomLevel, zoomStep, effectiveSetZoomLevel]);
   const handleZoomOut = (0,external_react_.useCallback)(() => {
-    if (setZoomLevel && zoomOn) {
-      setZoomLevel(prev => Math.max(minZoomLevel, prev - zoomStep));
+    if (zoomOn) {
+      effectiveSetZoomLevel(prev => Math.max(minZoomLevel, prev - zoomStep));
     }
-  }, [setZoomLevel, zoomOn, minZoomLevel, zoomStep]);
+  }, [zoomOn, minZoomLevel, zoomStep, effectiveSetZoomLevel]);
 
   // ---------------------------------------------------------
   // 8.6) Keyboard Shortcuts
@@ -6265,8 +6269,8 @@ const Timeline_Timeline_Timeline = _ref => {
     onMonthRetreat: handleMonthRetreat,
     dayRange: dayRange,
     setDayRange: setDayRange,
-    zoomLevel: zoomLevel,
-    setZoomLevel: setZoomLevel,
+    zoomLevel: effectiveZoomLevel,
+    setZoomLevel: effectiveSetZoomLevel,
     zoomOn: zoomOn,
     minZoomLevel: minZoomLevel,
     maxZoomLevel: maxZoomLevel,
@@ -6361,7 +6365,9 @@ const Timeline_Timeline_Timeline = _ref => {
     eventBadgeResolver: eventBadgeResolver,
     isLoading: isLoading,
     loadingType: loadingType,
-    disableDates: disableDates
+    disableDates: disableDates,
+    autoSelectEnabledRange: autoSelectEnabledRange,
+    autoSelectRanges: autoSelectRanges
   }), selectedEvent && /*#__PURE__*/external_react_default().createElement(Timeline_EventTooltip, {
     event: selectedEvent,
     position: tooltipPosition,

package/dist/components/Timeline/Timeline.jsx

@@ -127,6 +127,12 @@ const Timeline = ({
   // mode: 'exclude' = belirtilen tarihler disabled, 'include' = belirtilen tarihler enabled (diğerleri disabled)
   // dates: ['2025-01-15', '2025-01-20', ...] veya [Date, Date, ...] - Tekil tarihler
   // ranges: [{ start: '2025-01-15', end: '2025-01-20' }, ...] veya [{ start: Date, end: Date }, ...] - Tarih aralıkları
+  
+  // Auto Select Enabled Range
+  autoSelectEnabledRange = false, // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  autoSelectRanges = null, // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
+  // autoSelectRanges tanımlı olduğunda, tıklanan tarih bu range'lerden birinin içindeyse otomatik olarak tüm range seçilir
+  // autoSelectRanges: null ise ve disableDates mode: 'include' ise, disableDates.ranges kullanılır (geriye dönük uyumluluk)
 }) => {
   // ---------------------------------------------------------
   // 1) timelineData oluştur (dates, monthHeaders vs.)
@@ -152,6 +158,13 @@ const Timeline = ({
   // 2) local state
   // ---------------------------------------------------------
   const [collapsedGroups, setCollapsedGroups] = useState({});
+  
+  // Internal zoom state - eğer setZoomLevel prop'u yoksa kullanılır
+  const [internalZoomLevel, setInternalZoomLevel] = useState(zoomLevel);
+  
+  // Effective zoom level - prop varsa prop'u kullan, yoksa internal state'i kullan
+  const effectiveZoomLevel = setZoomLevel ? zoomLevel : internalZoomLevel;
+  const effectiveSetZoomLevel = setZoomLevel || setInternalZoomLevel;
 
   // Event Management
   const eventManagement = useEventManagement(
@@ -206,9 +219,17 @@ const Timeline = ({
   //    Container genişliği = dayRange * cellWidth
   // ---------------------------------------------------------
   const baseCellWidth = 56.95; // Temel hücre genişliği (zoom = 1.0 için)
-  const cellWidth = baseCellWidth * zoomLevel; // Zoom seviyesine göre hücre genişliği
+  const cellWidth = baseCellWidth * effectiveZoomLevel; // Zoom seviyesine göre hücre genişliği
   const containerWidth = dayRange * cellWidth;
   
+  // Internal zoom state'i prop'tan gelen zoomLevel ile senkronize et
+  useEffect(() => {
+    if (setZoomLevel) {
+      // Prop'tan gelen zoomLevel kullanılıyor, internal state'i güncelle
+      setInternalZoomLevel(zoomLevel);
+    }
+  }, [zoomLevel, setZoomLevel]);
+  
   // ---------------------------------------------------------
   // 4) Touch Gestures (Mobil desteği)
   // ---------------------------------------------------------
@@ -321,11 +342,16 @@ const Timeline = ({
   };
 
   const handleToday = () => {
-    const today = programDate ? new Date(programDate) : new Date();
-    today.setDate(today.getDate() - 3); // Program tarihinden 3 gün öncesini ayarla
+    // Bugünün tarihini al
+    const today = new Date();
+    today.setDate(today.getDate() - 3); // Bugünden 3 gün öncesini ayarla
     setSelectedDate(today);
-    // App.js'teki callback'i de çağır
-    if (onToday) onToday();
+    
+    // onToday callback'i bir fonksiyon ise çağır
+    // Eğer onToday bir string (tarih) ise veya başka bir değer ise, sadece setSelectedDate yeterli
+    if (typeof onToday === 'function') {
+      onToday();
+    }
   };
   
 
@@ -370,16 +396,16 @@ const Timeline = ({
   // 8.5) Zoom handlers
   // ---------------------------------------------------------
   const handleZoomIn = useCallback(() => {
-    if (setZoomLevel && zoomOn) {
-      setZoomLevel((prev) => Math.min(maxZoomLevel, prev + zoomStep));
+    if (zoomOn) {
+      effectiveSetZoomLevel((prev) => Math.min(maxZoomLevel, prev + zoomStep));
     }
-  }, [setZoomLevel, zoomOn, maxZoomLevel, zoomStep]);
+  }, [zoomOn, maxZoomLevel, zoomStep, effectiveSetZoomLevel]);
 
   const handleZoomOut = useCallback(() => {
-    if (setZoomLevel && zoomOn) {
-      setZoomLevel((prev) => Math.max(minZoomLevel, prev - zoomStep));
+    if (zoomOn) {
+      effectiveSetZoomLevel((prev) => Math.max(minZoomLevel, prev - zoomStep));
     }
-  }, [setZoomLevel, zoomOn, minZoomLevel, zoomStep]);
+  }, [zoomOn, minZoomLevel, zoomStep, effectiveSetZoomLevel]);
 
   // ---------------------------------------------------------
   // 8.6) Keyboard Shortcuts
@@ -437,8 +463,8 @@ const Timeline = ({
           onMonthRetreat={handleMonthRetreat}
           dayRange={dayRange}
           setDayRange={setDayRange}
-          zoomLevel={zoomLevel}
-          setZoomLevel={setZoomLevel}
+          zoomLevel={effectiveZoomLevel}
+          setZoomLevel={effectiveSetZoomLevel}
           zoomOn={zoomOn}
           minZoomLevel={minZoomLevel}
           maxZoomLevel={maxZoomLevel}
@@ -541,6 +567,8 @@ const Timeline = ({
               isLoading={isLoading}
               loadingType={loadingType}
               disableDates={disableDates}
+              autoSelectEnabledRange={autoSelectEnabledRange}
+              autoSelectRanges={autoSelectRanges}
 
             />
 

package/dist/components/Timeline/TimelineContent.jsx

@@ -70,6 +70,10 @@ const TimelineContent = ({
   
   // Disable Dates
   disableDates = null, // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+  
+  // Auto Select Enabled Range
+  autoSelectEnabledRange = false, // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  autoSelectRanges = null, // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
 }) => {
   // ------------------- HOOKS & STATE -------------------
   const containerRef = useRef(null);
@@ -304,7 +308,6 @@ const TimelineContent = ({
     if (!createNewEventOn) return;
     if (!isCreating) return;
     if (mode === "extend") {
-      console.log(">>> 'extend' mode, skip new event creation");
       return;
     }
 
@@ -470,13 +473,10 @@ const TimelineContent = ({
 
   // ------------------- Drag Logic -------------------
   const handleDragStartSafe = (e, eventId) => {
-    console.log("[TimelineContent] handleDragStartSafe called:", { eventId, eventsDragOn });
     if (!eventsDragOn) {
-      console.log("[TimelineContent] Events drag is disabled, preventing drag start");
       e.preventDefault();
       return;
     }
-    console.log("[TimelineContent] Calling handleDragStart...");
     handleDragStart(e, eventId);
   };
   const handleDragEndSafe = (e) => {
@@ -495,7 +495,6 @@ const TimelineContent = ({
   const handleMouseDownExtend = (mouseEvent, event) => {
     if (!eventsExtendOn) return;
     mouseEvent.stopPropagation();
-    console.log(">>> Extend start ID:", event.id);
     setMode("extend");
     setExtendingEvent(event);
     setOriginalEndDate(event.endDate);
@@ -521,7 +520,6 @@ const TimelineContent = ({
   }, [mode, extendingEvent, eventsExtendOn, originalEndDate, startMouseX, setEvents]);
 
   const handleMouseUpExtend = useCallback(() => {
-    console.log(">>> Extend finished ID:", extendingEvent?.id);
     if (onExtendInfo && extendingEvent) {
       // callback
       const updatedEvent = events.find((ev) => ev.id === extendingEvent.id);
@@ -682,15 +680,6 @@ const TimelineContent = ({
             const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
             const preventPastEventsDateOnly = new Date(preventPastEventsDateObj.getFullYear(), preventPastEventsDateObj.getMonth(), preventPastEventsDateObj.getDate());
             isPastDate = cellDateOnly < preventPastEventsDateOnly;
-            // Debug: İlk birkaç hücre için log
-            if (colIndex < 3 && groupIndex === 0) {
-              console.log('[TimelineContent] Past date check:', {
-                cellDate: cellDateOnly.toISOString().split('T')[0],
-                preventPastEventsDateValue: preventPastEventsDateOnly.toISOString().split('T')[0],
-                isPastDate,
-                preventPastEvents
-              });
-            }
           }
           
           // Disabled tarih kontrolü
@@ -817,7 +806,6 @@ const TimelineContent = ({
                           e.preventDefault();
                           return;
                         }
-                        console.log("[TimelineContent] Event drag start:", event.id);
                         handleDragStart(e, event.id);
                         e.stopPropagation();
                         
@@ -908,15 +896,6 @@ const TimelineContent = ({
                 const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
                 const preventPastEventsDateOnly = new Date(preventPastEventsDateObj.getFullYear(), preventPastEventsDateObj.getMonth(), preventPastEventsDateObj.getDate());
                 isPastDate = cellDateOnly < preventPastEventsDateOnly;
-                // Debug: İlk birkaç hücre için log
-                if (colIndex < 3 && rowIndex === 0 && groupIndex === 0) {
-                  console.log('[TimelineContent] Cell past date check:', {
-                    cellDate: cellDateOnly.toISOString().split('T')[0],
-                    preventPastEventsDateValue: preventPastEventsDateOnly.toISOString().split('T')[0],
-                    isPastDate,
-                    preventPastEvents
-                  });
-                }
               }
               
               // Hafta sonu kontrolü
@@ -1004,7 +983,6 @@ const TimelineContent = ({
                   }
                   e.preventDefault();
                   e.stopPropagation();
-                  console.log("[TimelineContent] onDragOver called for resource:", resource.id);
                   handleDragOver(e);
                 }}
                 onDrop={(e) => {
@@ -1016,8 +994,7 @@ const TimelineContent = ({
                     return false;
                   }
                   e.preventDefault();
-                  e.stopPropagation();
-                  console.log("[TimelineContent] onDrop called for resource:", resource.id, "date:", dateObj.fullDate);
+                  e.stopPropagation();                  
                   handleDrop(e, resource.id, parseDate(dateObj.fullDate));
                 }}
               ></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akfatimeline",
-  "version": "2.2.4",
+  "version": "2.2.6",
   "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

@@ -55,6 +55,23 @@ const App = () => {
     ],
   };
   
+  // Auto Select Enabled Range - Belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  const [autoSelectEnabledRange, setAutoSelectEnabledRange] = useState(true); // true = aktif, false = pasif
+  
+  // Auto Select Ranges - Auto-select için range'ler (disableDates'ten bağımsız)
+  // Bu range'lere tıklandığında otomatik olarak tüm range seçilir
+  const autoSelectRanges = [
+    {
+      start: '2025-12-31', // 31 Aralık 2025
+      end: '2026-01-05',    // 5 Ocak 2026
+    },
+    // İstediğiniz kadar range ekleyebilirsiniz
+    // {
+    //   start: '2026-02-01',
+    //   end: '2026-02-10',
+    // },
+  ];
+  
   // Cell Tooltip için örnek fiyat verisi
   // Her gün için farklı fiyatlar tanımlanabilir
   const getCellTooltipContent = (resource, dateObj) => {
@@ -450,6 +467,9 @@ const resources = [
         <button onClick={() => setIsLoading(!isLoading)}>
           Loading: {isLoading ? "Açık" : "Kapalı"}
         </button>
+        <button onClick={() => setAutoSelectEnabledRange(!autoSelectEnabledRange)}>
+          Auto Select Enabled Range: {autoSelectEnabledRange ? "Açık" : "Kapalı"}
+        </button>
         <button onClick={handleToday}>Bugüne Git</button>
         <button onClick={handleRetreat}>5 Gün Geri</button>
         <button onClick={handleAdvance}>5 Gün İleri</button>
@@ -561,6 +581,8 @@ const resources = [
           />
         }
         disableDates={disableDates}
+        autoSelectEnabledRange={autoSelectEnabledRange}
+        autoSelectRanges={autoSelectRanges}
 
       />
     </div>

package/src/components/Timeline/Timeline.jsx

@@ -127,6 +127,12 @@ const Timeline = ({
   // mode: 'exclude' = belirtilen tarihler disabled, 'include' = belirtilen tarihler enabled (diğerleri disabled)
   // dates: ['2025-01-15', '2025-01-20', ...] veya [Date, Date, ...] - Tekil tarihler
   // ranges: [{ start: '2025-01-15', end: '2025-01-20' }, ...] veya [{ start: Date, end: Date }, ...] - Tarih aralıkları
+  
+  // Auto Select Enabled Range
+  autoSelectEnabledRange = false, // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  autoSelectRanges = null, // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
+  // autoSelectRanges tanımlı olduğunda, tıklanan tarih bu range'lerden birinin içindeyse otomatik olarak tüm range seçilir
+  // autoSelectRanges: null ise ve disableDates mode: 'include' ise, disableDates.ranges kullanılır (geriye dönük uyumluluk)
 }) => {
   // ---------------------------------------------------------
   // 1) timelineData oluştur (dates, monthHeaders vs.)
@@ -152,6 +158,13 @@ const Timeline = ({
   // 2) local state
   // ---------------------------------------------------------
   const [collapsedGroups, setCollapsedGroups] = useState({});
+  
+  // Internal zoom state - eğer setZoomLevel prop'u yoksa kullanılır
+  const [internalZoomLevel, setInternalZoomLevel] = useState(zoomLevel);
+  
+  // Effective zoom level - prop varsa prop'u kullan, yoksa internal state'i kullan
+  const effectiveZoomLevel = setZoomLevel ? zoomLevel : internalZoomLevel;
+  const effectiveSetZoomLevel = setZoomLevel || setInternalZoomLevel;
 
   // Event Management
   const eventManagement = useEventManagement(
@@ -206,9 +219,17 @@ const Timeline = ({
   //    Container genişliği = dayRange * cellWidth
   // ---------------------------------------------------------
   const baseCellWidth = 56.95; // Temel hücre genişliği (zoom = 1.0 için)
-  const cellWidth = baseCellWidth * zoomLevel; // Zoom seviyesine göre hücre genişliği
+  const cellWidth = baseCellWidth * effectiveZoomLevel; // Zoom seviyesine göre hücre genişliği
   const containerWidth = dayRange * cellWidth;
   
+  // Internal zoom state'i prop'tan gelen zoomLevel ile senkronize et
+  useEffect(() => {
+    if (setZoomLevel) {
+      // Prop'tan gelen zoomLevel kullanılıyor, internal state'i güncelle
+      setInternalZoomLevel(zoomLevel);
+    }
+  }, [zoomLevel, setZoomLevel]);
+  
   // ---------------------------------------------------------
   // 4) Touch Gestures (Mobil desteği)
   // ---------------------------------------------------------
@@ -321,11 +342,16 @@ const Timeline = ({
   };
 
   const handleToday = () => {
-    const today = programDate ? new Date(programDate) : new Date();
-    today.setDate(today.getDate() - 3); // Program tarihinden 3 gün öncesini ayarla
+    // Bugünün tarihini al
+    const today = new Date();
+    today.setDate(today.getDate() - 3); // Bugünden 3 gün öncesini ayarla
     setSelectedDate(today);
-    // App.js'teki callback'i de çağır
-    if (onToday) onToday();
+    
+    // onToday callback'i bir fonksiyon ise çağır
+    // Eğer onToday bir string (tarih) ise veya başka bir değer ise, sadece setSelectedDate yeterli
+    if (typeof onToday === 'function') {
+      onToday();
+    }
   };
   
 
@@ -370,16 +396,16 @@ const Timeline = ({
   // 8.5) Zoom handlers
   // ---------------------------------------------------------
   const handleZoomIn = useCallback(() => {
-    if (setZoomLevel && zoomOn) {
-      setZoomLevel((prev) => Math.min(maxZoomLevel, prev + zoomStep));
+    if (zoomOn) {
+      effectiveSetZoomLevel((prev) => Math.min(maxZoomLevel, prev + zoomStep));
     }
-  }, [setZoomLevel, zoomOn, maxZoomLevel, zoomStep]);
+  }, [zoomOn, maxZoomLevel, zoomStep, effectiveSetZoomLevel]);
 
   const handleZoomOut = useCallback(() => {
-    if (setZoomLevel && zoomOn) {
-      setZoomLevel((prev) => Math.max(minZoomLevel, prev - zoomStep));
+    if (zoomOn) {
+      effectiveSetZoomLevel((prev) => Math.max(minZoomLevel, prev - zoomStep));
     }
-  }, [setZoomLevel, zoomOn, minZoomLevel, zoomStep]);
+  }, [zoomOn, minZoomLevel, zoomStep, effectiveSetZoomLevel]);
 
   // ---------------------------------------------------------
   // 8.6) Keyboard Shortcuts
@@ -437,8 +463,8 @@ const Timeline = ({
           onMonthRetreat={handleMonthRetreat}
           dayRange={dayRange}
           setDayRange={setDayRange}
-          zoomLevel={zoomLevel}
-          setZoomLevel={setZoomLevel}
+          zoomLevel={effectiveZoomLevel}
+          setZoomLevel={effectiveSetZoomLevel}
           zoomOn={zoomOn}
           minZoomLevel={minZoomLevel}
           maxZoomLevel={maxZoomLevel}
@@ -541,6 +567,8 @@ const Timeline = ({
               isLoading={isLoading}
               loadingType={loadingType}
               disableDates={disableDates}
+              autoSelectEnabledRange={autoSelectEnabledRange}
+              autoSelectRanges={autoSelectRanges}
 
             />
 

package/src/components/Timeline/TimelineContent.jsx

@@ -70,6 +70,10 @@ const TimelineContent = ({
   
   // Disable Dates
   disableDates = null, // { mode: 'exclude' | 'include', dates: [], ranges: [] }
+  
+  // Auto Select Enabled Range
+  autoSelectEnabledRange = false, // true = belirtilen range'lere tıklandığında otomatik olarak tüm range'i seç
+  autoSelectRanges = null, // [{ start: '2025-12-31', end: '2026-01-05' }, ...] - Auto-select için range'ler (disableDates'ten bağımsız)
 }) => {
   // ------------------- HOOKS & STATE -------------------
   const containerRef = useRef(null);
@@ -304,7 +308,6 @@ const TimelineContent = ({
     if (!createNewEventOn) return;
     if (!isCreating) return;
     if (mode === "extend") {
-      console.log(">>> 'extend' mode, skip new event creation");
       return;
     }
 
@@ -470,13 +473,10 @@ const TimelineContent = ({
 
   // ------------------- Drag Logic -------------------
   const handleDragStartSafe = (e, eventId) => {
-    console.log("[TimelineContent] handleDragStartSafe called:", { eventId, eventsDragOn });
     if (!eventsDragOn) {
-      console.log("[TimelineContent] Events drag is disabled, preventing drag start");
       e.preventDefault();
       return;
     }
-    console.log("[TimelineContent] Calling handleDragStart...");
     handleDragStart(e, eventId);
   };
   const handleDragEndSafe = (e) => {
@@ -495,7 +495,6 @@ const TimelineContent = ({
   const handleMouseDownExtend = (mouseEvent, event) => {
     if (!eventsExtendOn) return;
     mouseEvent.stopPropagation();
-    console.log(">>> Extend start ID:", event.id);
     setMode("extend");
     setExtendingEvent(event);
     setOriginalEndDate(event.endDate);
@@ -521,7 +520,6 @@ const TimelineContent = ({
   }, [mode, extendingEvent, eventsExtendOn, originalEndDate, startMouseX, setEvents]);
 
   const handleMouseUpExtend = useCallback(() => {
-    console.log(">>> Extend finished ID:", extendingEvent?.id);
     if (onExtendInfo && extendingEvent) {
       // callback
       const updatedEvent = events.find((ev) => ev.id === extendingEvent.id);
@@ -682,15 +680,6 @@ const TimelineContent = ({
             const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
             const preventPastEventsDateOnly = new Date(preventPastEventsDateObj.getFullYear(), preventPastEventsDateObj.getMonth(), preventPastEventsDateObj.getDate());
             isPastDate = cellDateOnly < preventPastEventsDateOnly;
-            // Debug: İlk birkaç hücre için log
-            if (colIndex < 3 && groupIndex === 0) {
-              console.log('[TimelineContent] Past date check:', {
-                cellDate: cellDateOnly.toISOString().split('T')[0],
-                preventPastEventsDateValue: preventPastEventsDateOnly.toISOString().split('T')[0],
-                isPastDate,
-                preventPastEvents
-              });
-            }
           }
           
           // Disabled tarih kontrolü
@@ -817,7 +806,6 @@ const TimelineContent = ({
                           e.preventDefault();
                           return;
                         }
-                        console.log("[TimelineContent] Event drag start:", event.id);
                         handleDragStart(e, event.id);
                         e.stopPropagation();
                         
@@ -908,15 +896,6 @@ const TimelineContent = ({
                 const cellDateOnly = new Date(cellDate.getFullYear(), cellDate.getMonth(), cellDate.getDate());
                 const preventPastEventsDateOnly = new Date(preventPastEventsDateObj.getFullYear(), preventPastEventsDateObj.getMonth(), preventPastEventsDateObj.getDate());
                 isPastDate = cellDateOnly < preventPastEventsDateOnly;
-                // Debug: İlk birkaç hücre için log
-                if (colIndex < 3 && rowIndex === 0 && groupIndex === 0) {
-                  console.log('[TimelineContent] Cell past date check:', {
-                    cellDate: cellDateOnly.toISOString().split('T')[0],
-                    preventPastEventsDateValue: preventPastEventsDateOnly.toISOString().split('T')[0],
-                    isPastDate,
-                    preventPastEvents
-                  });
-                }
               }
               
               // Hafta sonu kontrolü
@@ -1004,7 +983,6 @@ const TimelineContent = ({
                   }
                   e.preventDefault();
                   e.stopPropagation();
-                  console.log("[TimelineContent] onDragOver called for resource:", resource.id);
                   handleDragOver(e);
                 }}
                 onDrop={(e) => {
@@ -1016,8 +994,7 @@ const TimelineContent = ({
                     return false;
                   }
                   e.preventDefault();
-                  e.stopPropagation();
-                  console.log("[TimelineContent] onDrop called for resource:", resource.id, "date:", dateObj.fullDate);
+                  e.stopPropagation();                  
                   handleDrop(e, resource.id, parseDate(dateObj.fullDate));
                 }}
               ></div>