- {/* Day-by-day navigation buttons (only show in week view) */}
- {calendarView === Views.WEEK && (
-
-
{
- const newDate = new Date(currentDate)
- newDate.setDate(newDate.getDate() - 1)
- setCurrentDate(newDate)
- }}
- className="px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded border border-gray-300 dark:border-gray-600"
- title="Previous day"
- >
-
-
-
-
{
- const newDate = new Date(currentDate)
- newDate.setDate(newDate.getDate() + 1)
- setCurrentDate(newDate)
- }}
- className="px-2 py-1 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 rounded border border-gray-300 dark:border-gray-600"
- title="Next day"
- >
-
-
-
-
Day
-
- )}
-
Marker Style:
-
setMarkerStyle('lines')}
- className={`px-3 py-1 text-xs rounded ${markerStyle === 'lines'
- ? 'bg-blue-500 text-white'
- : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
- }`}
- >
- Lines
-
-
setMarkerStyle('circles')}
- className={`px-3 py-1 text-xs rounded ${markerStyle === 'circles'
- ? 'bg-blue-500 text-white'
- : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
- }`}
- >
- Circles
-
-
setMarkerStyle('dots')}
- className={`px-3 py-1 text-xs rounded ${markerStyle === 'dots'
- ? 'bg-blue-500 text-white'
- : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
- }`}
- >
- Dots
-
-
setMarkerStyle('icons')}
- className={`px-3 py-1 text-xs rounded ${markerStyle === 'icons'
- ? 'bg-blue-500 text-white'
- : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
- }`}
- >
- Icons
-
+ )}
+ {/* Week Calendar for selected conductors' availability */}
+
+
+
Selected Conductors' Availability & Experiment Scheduling
-
-
-
- {
- // Preserve scroll position before updating
- preserveScrollPosition()
-
- // Handle dragging repetition markers
- const eventId = event.id as string
- // Clamp to reasonable working hours (5AM to 11PM) to prevent extreme times
- const clampToReasonableHours = (d: Date) => {
- const min = new Date(d)
- min.setHours(5, 0, 0, 0)
- const max = new Date(d)
- max.setHours(23, 0, 0, 0)
- const t = d.getTime()
- return new Date(Math.min(Math.max(t, min.getTime()), max.getTime()))
- }
- const clampedStart = clampToReasonableHours(start)
-
- let repId = ''
- if (eventId.includes('-soaking')) {
- repId = eventId.replace('-soaking', '')
- updatePhaseTiming(repId, 'soaking', clampedStart)
- } else if (eventId.includes('-airdrying')) {
- repId = eventId.replace('-airdrying', '')
- updatePhaseTiming(repId, 'airdrying', clampedStart)
- } else if (eventId.includes('-cracking')) {
- repId = eventId.replace('-cracking', '')
- updatePhaseTiming(repId, 'cracking', clampedStart)
- }
-
- // Add repetition to show time points
- if (repId) {
- setRepetitionsWithTimes(prev => new Set(prev).add(repId))
- }
-
- // Restore scroll position after a brief delay to allow for re-render
- setTimeout(() => {
- restoreScrollPosition()
- }, 10)
- }}
- eventPropGetter={eventPropGetter}
- backgroundEventPropGetter={(event: any) => {
- // Styling for background events (conductor availability)
- const conductorId = event.resource
- const color = conductorColorMap[conductorId] || '#2563eb'
- return {
- style: {
- backgroundColor: color + '40', // ~25% transparency for background
- borderColor: color,
- borderWidth: '1px',
- borderStyle: 'solid',
- color: 'transparent',
- borderRadius: '4px',
- opacity: 0.6,
- height: 'auto',
- minHeight: '20px',
- fontSize: '0px',
- padding: '0px',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- whiteSpace: 'nowrap'
+
+
+ {
+ // Handle clicking on repetition markers to toggle lock
+ const resource = event.resource as string
+ if (resource === 'soaking' || resource === 'airdrying' || resource === 'cracking') {
+ const eventId = event.id as string
+ const repId = eventId.split('-')[0]
+ // Toggle lock for this repetition - this will update both checkbox and marker icons
+ toggleScheduleLock(repId)
+ // Prevent default popup behavior
+ return false
}
- }
- }}
- popup
- showMultiDayTimes
- doShowMore={true}
- step={30}
- timeslots={2}
- />
-
-
+ }}
+ onEventDrop={({ event, start }: { event: any, start: Date }) => {
+ // Preserve scroll position before updating
+ preserveScrollPosition()
-
+ // Handle dragging repetition markers
+ const eventId = event.id as string
+ // Clamp to reasonable working hours (5AM to 11PM) to prevent extreme times
+ const clampToReasonableHours = (d: Date) => {
+ const min = new Date(d)
+ min.setHours(5, 0, 0, 0)
+ const max = new Date(d)
+ max.setHours(23, 0, 0, 0)
+ const t = d.getTime()
+ return new Date(Math.min(Math.max(t, min.getTime()), max.getTime()))
+ }
+ const clampedStart = clampToReasonableHours(start)
+
+ let repId = ''
+ if (eventId.includes('-soaking')) {
+ repId = eventId.replace('-soaking', '')
+ updatePhaseTiming(repId, 'soaking', clampedStart)
+ } else if (eventId.includes('-airdrying')) {
+ repId = eventId.replace('-airdrying', '')
+ updatePhaseTiming(repId, 'airdrying', clampedStart)
+ } else if (eventId.includes('-cracking')) {
+ repId = eventId.replace('-cracking', '')
+ updatePhaseTiming(repId, 'cracking', clampedStart)
+ }
+
+ // Add repetition to show time points
+ if (repId) {
+ setRepetitionsWithTimes(prev => new Set(prev).add(repId))
+ }
+
+ // Restore scroll position after a brief delay to allow for re-render
+ setTimeout(() => {
+ restoreScrollPosition()
+ }, 10)
+ }}
+ eventPropGetter={eventPropGetter}
+ backgroundEventPropGetter={(event: any) => {
+ // Styling for background events (conductor availability)
+ const conductorId = event.resource as string
+ const color = conductorColorMap[conductorId] || '#2563eb'
+ // Use more visible colors - higher opacity for better visibility
+ return {
+ style: {
+ backgroundColor: color + '60', // ~37% opacity for better visibility
+ borderColor: color,
+ borderWidth: '2px',
+ borderStyle: 'solid',
+ color: 'transparent',
+ borderRadius: '4px',
+ opacity: 0.8,
+ height: 'auto',
+ minHeight: '20px',
+ fontSize: '0px',
+ padding: '0px',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ whiteSpace: 'nowrap'
+ }
+ }
+ }}
+ popup
+ showMultiDayTimes
+ doShowMore={true}
+ step={30}
+ timeslots={2}
+ />
+
+