diff --git a/custom_ui/api/db/jobs.py b/custom_ui/api/db/jobs.py
index e806371..13d8110 100644
--- a/custom_ui/api/db/jobs.py
+++ b/custom_ui/api/db/jobs.py
@@ -46,5 +46,64 @@ def get_jobs_table_data(filters={}, sortings=[], page=1, page_size=10):
 @frappe.whitelist()
 def upsert_job(data):
     """Create or update a job (project)."""
-    # TODO: Implement job creation/update logic
-    pass
+    try:
+        if isinstance(data, str):
+            data = json.loads(data)
+            
+        project_id = data.get("id")
+        if not project_id:
+            return {"status": "error", "message": "Project ID is required"}
+            
+        project = frappe.get_doc("Project", project_id)
+        
+        if "scheduledDate" in data:
+            project.expected_start_date = data["scheduledDate"]
+            
+        if "foreman" in data:
+            project.custom_install_crew = data["foreman"]
+            
+        project.save()
+        return {"status": "success", "data": project.as_dict()}
+    except Exception as e:
+        return {"status": "error", "message": str(e)}
+
+@frappe.whitelist()
+def get_install_projects(start_date=None, end_date=None):
+    """Get install projects for the calendar."""
+    try:
+        filters = {"project_template": "SNW Install"}
+        # If date range provided, we could filter, but for now let's fetch all open/active ones
+        # or maybe filter by status not Closed/Completed if we want active ones.
+        # The user said "unscheduled" are those with status "Open" (and no date).
+        
+        projects = frappe.get_all("Project", fields=["*"], filters=filters)
+        
+        calendar_events = []
+        for project in projects:
+            # Determine status
+            status = "unscheduled"
+            if project.get("expected_start_date"):
+                status = "scheduled"
+            
+            # Map to calendar event format
+            event = {
+                "id": project.name,
+                "serviceType": project.project_name, # Using project name as service type/title
+                "customer": project.customer,
+                "status": status,
+                "scheduledDate": project.expected_start_date,
+                "scheduledTime": "08:00", # Default time if not specified? Project doesn't seem to have time.
+                "duration": 480, # Default 8 hours?
+                "foreman": project.get("custom_install_crew"),
+                "crew": [], # Need to map crew
+                "estimatedCost": project.estimated_costing,
+                "priority": project.priority.lower() if project.priority else "medium",
+                "notes": project.notes,
+                "address": project.custom_installation_address
+            }
+            
+            calendar_events.append(event)
+            
+        return {"status": "success", "data": calendar_events}
+    except Exception as e:
+        return {"status": "error", "message": str(e)}
\ No newline at end of file
diff --git a/frontend/src/api.js b/frontend/src/api.js
index dbc277f..78e7aee 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -16,6 +16,7 @@ const FRAPPE_ESTIMATE_UPDATE_RESPONSE_METHOD = "custom_ui.api.db.estimates.manua
 const FRAPPE_GET_JOBS_METHOD = "custom_ui.api.db.jobs.get_jobs_table_data";
 const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.jobs.upsert_job";
 const FRAPPE_GET_JOB_TASK_LIST_METHOD = "custom_ui.api.db.get_job_task_list";
+const FRAPPE_GET_INSTALL_PROJECTS_METHOD = "custom_ui.api.db.jobs.get_install_projects";
 // Invoice methods
 const FRAPPE_GET_INVOICES_METHOD = "custom_ui.api.db.invoices.get_invoice_table_data";
 const FRAPPE_UPSERT_INVOICE_METHOD = "custom_ui.api.db.invoices.upsert_invoice";
@@ -98,6 +99,17 @@ class Api {
 		return await this.request(FRAPPE_GET_CLIENT_NAMES_METHOD, { type });
 	}
 
+	static async getInstallProjects(startDate, endDate) {
+		return await this.request(FRAPPE_GET_INSTALL_PROJECTS_METHOD, {
+			start_date: startDate,
+			end_date: endDate,
+		});
+	}
+
+	static async upsertJob(data) {
+		return await this.request(FRAPPE_UPSERT_JOB_METHOD, { data });
+	}
+
 	static async getClientNames(clientName) {
 		return await this.request(FRAPPE_GET_CLIENT_NAMES_METHOD, { searchTerm: clientName });
 	}
diff --git a/frontend/src/components/calendar/CalendarNavigation.vue b/frontend/src/components/calendar/CalendarNavigation.vue
index e341596..6d8993a 100644
--- a/frontend/src/components/calendar/CalendarNavigation.vue
+++ b/frontend/src/components/calendar/CalendarNavigation.vue
@@ -15,7 +15,7 @@
 					<ScheduleBid />
 				</TabPanel>
 				<TabPanel header="Install" value="1">
-						<JobsCalendar />
+						<InstallsCalendar />
 				</TabPanel>
 				<TabPanel header="Service" value="2">
 					<div class="coming-soon">
@@ -56,6 +56,7 @@ import TabPanel from 'primevue/tabpanel';
 import TabPanels from 'primevue/tabpanels';
 import ScheduleBid from '../calendar/bids/ScheduleBid.vue';
 import JobsCalendar from '../calendar/jobs/JobsCalendar.vue';
+import InstallsCalendar from '../calendar/jobs/InstallsCalendar.vue';
 import { useNotificationStore } from '../../stores/notifications-primevue';
 
 const notifications = useNotificationStore();
diff --git a/frontend/src/components/calendar/jobs/InstallsCalendar.vue b/frontend/src/components/calendar/jobs/InstallsCalendar.vue
new file mode 100644
index 0000000..d173b2e
--- /dev/null
+++ b/frontend/src/components/calendar/jobs/InstallsCalendar.vue
@@ -0,0 +1,1200 @@
+<template>
+	<div class="calendar-container">
+		<div class="calendar-header">
+			<h2>Daily Schedule - Installs</h2>
+			<div class="header-controls">
+				<v-btn
+					@click="previousDay"
+					icon="mdi-chevron-left"
+					variant="outlined"
+					size="small"
+				></v-btn>
+				<v-btn
+					@click="showDatePicker = true"
+					variant="text"
+					class="day-display-btn"
+				>
+					<span class="date-text">{{ dayDisplayText }}</span>
+					<v-icon right size="small">mdi-calendar</v-icon>
+				</v-btn>
+				<v-btn
+					@click="nextDay"
+					icon="mdi-chevron-right"
+					variant="outlined"
+					size="small"
+				></v-btn>
+				<v-btn @click="goToToday" variant="outlined" size="small" class="ml-4"
+					>Today</v-btn
+				>
+				<v-menu
+					v-model="showForemenMenu"
+					:close-on-content-click="false"
+					location="bottom"
+				>
+					<template v-slot:activator="{ props }">
+						<v-btn
+							v-bind="props"
+							variant="outlined"
+							size="small"
+							class="ml-4"
+						>
+							<v-icon left size="small">mdi-account-group</v-icon>
+							Crews ({{ selectedForemen.length }})
+							<v-icon right size="small">mdi-chevron-down</v-icon>
+						</v-btn>
+					</template>
+					<v-card min-width="250" max-width="300">
+						<v-card-title class="text-subtitle-1 py-2">
+							Select Crews
+						</v-card-title>
+						<v-divider></v-divider>
+						<v-card-text class="pa-2">
+							<v-list density="compact">
+								<v-list-item @click="toggleAllForemen">
+									<template v-slot:prepend>
+										<v-checkbox-btn
+											:model-value="selectedForemen.length === foremen.length"
+											:indeterminate="selectedForemen.length > 0 && selectedForemen.length < foremen.length"
+										></v-checkbox-btn>
+									</template>
+									<v-list-item-title>Select All</v-list-item-title>
+								</v-list-item>
+								<v-divider></v-divider>
+								<v-list-item
+									v-for="foreman in foremen"
+									:key="foreman.id"
+									@click="toggleForeman(foreman.id)"
+								>
+									<template v-slot:prepend>
+										<v-checkbox-btn
+											:model-value="selectedForemen.includes(foreman.id)"
+										></v-checkbox-btn>
+									</template>
+									<v-list-item-title>{{ foreman.name }}</v-list-item-title>
+								</v-list-item>
+							</v-list>
+						</v-card-text>
+					</v-card>
+				</v-menu>
+			</div>
+		</div>
+
+		<!-- Date Picker Dialog -->
+		<v-dialog v-model="showDatePicker" max-width="400px">
+			<v-card>
+				<v-card-title>Select Date</v-card-title>
+				<v-card-text>
+					<v-date-picker
+						v-model="selectedDate"
+						@update:model-value="onDateSelected"
+						full-width
+					></v-date-picker>
+				</v-card-text>
+				<v-card-actions>
+					<v-spacer></v-spacer>
+					<v-btn @click="showDatePicker = false">Cancel</v-btn>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+
+		<div class="calendar-main">
+			<!-- Daily Calendar Grid -->
+			<div class="calendar-section">
+				<div class="daily-calendar">
+					<!-- Foremen Header -->
+					<div class="calendar-header-row" :style="{ gridTemplateColumns: `80px repeat(${visibleForemen.length}, 1fr)` }">
+						<div class="time-column-header">Time</div>
+						<div
+							v-for="foreman in visibleForemen"
+							:key="foreman.id"
+							class="foreman-header"
+						>
+							<div class="foreman-name">{{ foreman.name }}</div>
+							<div class="foreman-jobs">{{ getJobsCountForForeman(foreman.name) }} jobs</div>
+						</div>
+					</div>
+
+					<!-- Time Grid -->
+					<div class="calendar-grid">
+						<div v-for="timeSlot in timeSlots" :key="timeSlot.time" class="time-row" :style="{ gridTemplateColumns: `80px repeat(${visibleForemen.length}, 1fr)` }">
+							<!-- Time Column -->
+							<div class="time-column">
+								<span class="time-label">{{ timeSlot.display }}</span>
+							</div>
+
+							<!-- Foreman Columns -->
+							<div
+								v-for="foreman in visibleForemen"
+								:key="`${foreman.id}-${timeSlot.time}`"
+								class="foreman-column"
+								:class="{
+									'current-time': isCurrentTimeSlot(currentDate, timeSlot.time),
+									'drag-over': isDragOver && dragOverSlot?.foremanId === foreman.id && dragOverSlot?.time === timeSlot.time && !dragOverSlot?.isOccupied,
+									'drag-over-occupied': isDragOver && dragOverSlot?.foremanId === foreman.id && dragOverSlot?.time === timeSlot.time && dragOverSlot?.isOccupied,
+									'drag-preview': isDragOver && isInPreviewSlots(foreman.id, timeSlot.time),
+								}"
+								@click="selectTimeSlot(foreman.id, timeSlot.time)"
+								@dragover="handleDragOver($event, foreman.id, timeSlot.time)"
+								@dragleave="handleDragLeave"
+								@drop="handleDrop($event, foreman.id, timeSlot.time)"
+							>
+								<!-- Events in this time slot -->
+								<div
+									v-for="event in getEventsForTimeSlot(foreman.name, timeSlot.time, currentDate)"
+									:key="event.id"
+									class="calendar-event"
+									:class="getPriorityClass(event.priority)"
+									:style="getEventStyle(event)"
+									draggable="true"
+									@click.stop="showEventDetails({ event })"
+									@dragstart="handleDragStart(event, $event)"
+									@dragend="handleDragEnd"
+									@dragover.stop.prevent
+									@dragenter.stop.prevent
+								>
+									<div class="event-title">{{ event.serviceType }}</div>
+									<div class="event-customer">{{ event.customer }}</div>
+									<div class="event-time-display">{{ formatTimeDisplay(event.scheduledTime) }}</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+
+			<!-- Unscheduled Services Column -->
+			<div class="unscheduled-section">
+				<div class="unscheduled-header">
+					<h4>Unscheduled Installs</h4>
+					<v-chip
+						:color="getUnscheduledCount() > 0 ? 'warning' : 'success'"
+						size="small"
+					>
+						{{ getUnscheduledCount() }} pending
+					</v-chip>
+				</div>
+
+				<div 
+					class="unscheduled-list"
+					:class="{ 'unscheduled-drop-zone': isDragOver && draggedService?.status === 'scheduled' }"
+					@dragover="handleUnscheduledDragOver"
+					@dragleave="handleUnscheduledDragLeave"
+					@drop="handleUnscheduledDrop"
+				>
+					<v-card
+						v-for="service in unscheduledServices"
+						:key="service.id"
+						class="unscheduled-item mb-2"
+						:class="getPriorityClass(service.priority)"
+						elevation="1"
+						hover
+						density="compact"
+						draggable="true"
+						@dragstart="handleDragStart(service, $event)"
+						@dragend="handleDragEnd"
+					>
+						<v-card-text class="pa-3">
+							<div class="d-flex justify-space-between align-center mb-2">
+								<v-chip :color="getPriorityColor(service.priority)" size="x-small">
+									{{ service.priority.toUpperCase() }}
+								</v-chip>
+								<span class="text-caption text-medium-emphasis"
+									>${{ service.estimatedCost.toLocaleString() }}</span
+								>
+							</div>
+
+							<div class="service-title-compact">{{ service.serviceType }}</div>
+							<div class="service-customer">{{ service.customer }}</div>
+
+							<div class="service-compact-details mt-1">
+								<div class="text-caption">
+									<v-icon size="x-small" class="mr-1">mdi-clock</v-icon>
+									{{ formatDuration(service.duration) }}
+								</div>
+							</div>
+
+							<div v-if="service.notes" class="service-notes-compact mt-2">
+								<span class="text-caption">{{ service.notes }}</span>
+							</div>
+
+							<v-btn
+								color="primary"
+								size="x-small"
+								variant="outlined"
+								class="mt-2"
+								block
+								@click="scheduleService(service)"
+							>
+								<v-icon left size="x-small">mdi-calendar-plus</v-icon>
+								Schedule
+							</v-btn>
+						</v-card-text>
+					</v-card>
+				</div>
+
+				<div v-if="unscheduledServices.length === 0" class="no-unscheduled">
+					<v-icon size="large" color="success">mdi-check-circle</v-icon>
+					<p class="text-body-2">All installs scheduled!</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Event Details Dialog -->
+		<v-dialog v-model="eventDialog" max-width="600px">
+			<v-card v-if="selectedEvent">
+				<v-card-title class="d-flex justify-space-between align-center">
+					<span>{{ selectedEvent.title }}</span>
+					<v-chip :color="getPriorityColor(selectedEvent.priority)" small>
+						{{ selectedEvent.priority.toUpperCase() }}
+					</v-chip>
+				</v-card-title>
+
+				<v-card-text>
+					<div class="event-details">
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-account</v-icon>
+							<strong>Customer:</strong> {{ selectedEvent.customer }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-map-marker</v-icon>
+							<strong>Address:</strong> {{ selectedEvent.address }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-wrench</v-icon>
+							<strong>Service Type:</strong> {{ selectedEvent.serviceType }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-calendar</v-icon>
+							<strong>Date:</strong> {{ selectedEvent.scheduledDate }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-clock</v-icon>
+							<strong>Time:</strong> {{ selectedEvent.scheduledTime }} ({{
+								formatDuration(selectedEvent.duration)
+							}})
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-account-hard-hat</v-icon>
+							<strong>Crew:</strong> {{ selectedEvent.foreman || "Not assigned" }}
+						</div>
+						<div class="detail-row">
+							<v-icon class="mr-2">mdi-currency-usd</v-icon>
+							<strong>Estimated Cost:</strong> ${{
+								selectedEvent.estimatedCost.toLocaleString()
+							}}
+						</div>
+						<div v-if="selectedEvent.notes" class="detail-row">
+							<v-icon class="mr-2">mdi-note-text</v-icon>
+							<strong>Notes:</strong> {{ selectedEvent.notes }}
+						</div>
+					</div>
+				</v-card-text>
+
+				<v-card-actions>
+					<v-spacer></v-spacer>
+					<v-btn color="primary" @click="eventDialog = false">Close</v-btn>
+				</v-card-actions>
+			</v-card>
+		</v-dialog>
+	</div>
+</template>
+
+<script setup>
+import { ref, onMounted, computed, watch } from "vue";
+import Api from "../../../api";
+import { useNotificationStore } from "../../../stores/notifications-primevue";
+
+const notifications = useNotificationStore();
+
+// Reactive data
+const services = ref([]);
+const currentDate = ref(new Date().toISOString().split("T")[0]);
+const eventDialog = ref(false);
+const selectedEvent = ref(null);
+
+// Drag and drop state
+const draggedService = ref(null);
+const isDragOver = ref(false);
+const dragOverSlot = ref(null);
+const previewSlots = ref([]);
+
+// Foremen data (Crews)
+const foremen = ref([
+	{ id: 1, name: "Crew 1" },
+	{ id: 2, name: "Crew 2" },
+	{ id: 3, name: "Crew 3" },
+	{ id: 4, name: "Crew 4" },
+	{ id: 5, name: "Crew 5" },
+	{ id: 6, name: "Crew 6" },
+	{ id: 7, name: "Crew 7" },
+	{ id: 8, name: "Crew 8" },
+	{ id: 9, name: "Crew 9" },
+	{ id: 10, name: "Crew 10" },
+]);
+
+// Foremen selection
+const selectedForemen = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]); // Default to all selected
+const showForemenMenu = ref(false);
+
+// Date picker
+const showDatePicker = ref(false);
+const selectedDate = ref(null);
+
+// Computed properties
+const scheduledServices = computed(() =>
+	services.value.filter((service) => service.status === "scheduled" && service.foreman),
+);
+
+const unscheduledServices = computed(() =>
+	services.value.filter((service) => service.status === "unscheduled" || !service.foreman),
+);
+
+// Daily calendar computed properties
+const dayDisplayText = computed(() => {
+	const date = new Date(currentDate.value);
+	return date.toLocaleDateString("en-US", { 
+		weekday: "long", 
+		year: "numeric", 
+		month: "long", 
+		day: "numeric" 
+	});
+});
+
+// Foremen computed properties
+const foremenOptions = computed(() => {
+	return foremen.value.map(foreman => ({
+		id: foreman.id,
+		name: foreman.name
+	}));
+});
+
+const visibleForemen = computed(() => {
+	return foremen.value.filter(foreman => selectedForemen.value.includes(foreman.id));
+});
+
+const timeSlots = computed(() => {
+	const slots = [];
+	for (let hour = 7; hour < 19; hour++) {
+		// 7 AM to 7 PM
+		for (let minute = 0; minute < 60; minute += 30) {
+			// 30-minute intervals
+			const time = `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+			const displayHour = hour > 12 ? hour - 12 : hour === 0 ? 12 : hour;
+			const ampm = hour >= 12 ? "PM" : "AM";
+			const display =
+				minute === 0 ? `${displayHour}:00 ${ampm}` : `${displayHour}:30 ${ampm}`;
+
+			slots.push({
+				time,
+				display: minute === 0 ? display : "", // Only show hour labels on the hour
+				isHour: minute === 0,
+			});
+		}
+	}
+	return slots;
+});
+
+// Methods
+const getUnscheduledCount = () => unscheduledServices.value.length;
+
+const getPriorityClass = (priority) => {
+	switch (priority) {
+		case "urgent":
+			return "priority-urgent";
+		case "high":
+			return "priority-high";
+		case "medium":
+			return "priority-medium";
+		case "low":
+			return "priority-low";
+		default:
+			return "";
+	}
+};
+
+const getPriorityColor = (priority) => {
+	switch (priority) {
+		case "urgent":
+			return "red";
+		case "high":
+			return "orange";
+		case "medium":
+			return "yellow";
+		case "low":
+			return "green";
+		default:
+			return "grey";
+	}
+};
+
+const formatDuration = (minutes) => {
+	const hours = Math.floor(minutes / 60);
+	const mins = minutes % 60;
+	if (hours === 0) return `${mins}m`;
+	if (mins === 0) return `${hours}h`;
+	return `${hours}h ${mins}m`;
+};
+
+const getEndTime = (startTime, durationMinutes) => {
+	const [hours, minutes] = startTime.split(":").map(Number);
+	const startDate = new Date();
+	startDate.setHours(hours, minutes, 0, 0);
+	const endDate = new Date(startDate.getTime() + durationMinutes * 60000);
+	return endDate.toTimeString().slice(0, 5);
+};
+
+// Check if a time slot has any conflicts with existing events for a specific foreman
+const isTimeSlotOccupied = (foremanName, startTime, durationMinutes, excludeServiceId = null) => {
+	const endTime = getEndTime(startTime, durationMinutes);
+	
+	return scheduledServices.value.some((service) => {
+		// Exclude the service being moved
+		if (excludeServiceId && service.id === excludeServiceId) return false;
+		
+		// Check if this service is for the same foreman and date
+		if (service.foreman !== foremanName || service.scheduledDate !== currentDate.value) return false;
+		
+		const serviceEndTime = getEndTime(service.scheduledTime, service.duration);
+		
+		// Check for time overlap
+		return (
+			(startTime >= service.scheduledTime && startTime < serviceEndTime) ||
+			(endTime > service.scheduledTime && endTime <= serviceEndTime) ||
+			(startTime <= service.scheduledTime && endTime >= serviceEndTime)
+		);
+	});
+};
+
+// Get all time slots that would be occupied by an event for a specific foreman
+const getOccupiedSlots = (foremanId, startTime, durationMinutes) => {
+	const slots = [];
+	const endTime = getEndTime(startTime, durationMinutes);
+	
+	// Generate all 30-minute slots between start and end time
+	let currentTime = startTime;
+	while (currentTime < endTime) {
+		slots.push({ foremanId, time: currentTime });
+		
+		// Add 30 minutes
+		const [hours, minutes] = currentTime.split(':').map(Number);
+		const nextMinutes = minutes + 30;
+		const nextHours = hours + Math.floor(nextMinutes / 60);
+		const finalMinutes = nextMinutes % 60;
+		
+		currentTime = `${nextHours.toString().padStart(2, '0')}:${finalMinutes.toString().padStart(2, '0')}`;
+		
+		// Safety check to prevent infinite loop
+		if (nextHours >= 24) break;
+	}
+	
+	return slots;
+};
+
+// Calendar navigation methods
+const previousDay = () => {
+	const date = new Date(currentDate.value);
+	date.setDate(date.getDate() - 1);
+	currentDate.value = date.toISOString().split("T")[0];
+};
+
+const nextDay = () => {
+	const date = new Date(currentDate.value);
+	date.setDate(date.getDate() + 1);
+	currentDate.value = date.toISOString().split("T")[0];
+};
+
+const goToToday = () => {
+	const today = new Date();
+	currentDate.value = today.toISOString().split("T")[0];
+};
+
+// Event positioning and display methods
+const getEventsForTimeSlot = (foremanName, time, date) => {
+	return scheduledServices.value.filter((service) => {
+		if (service.scheduledDate !== date || service.foreman !== foremanName) return false;
+
+		// Only show the event in its starting time slot to prevent duplication
+		return service.scheduledTime === time;
+	});
+};
+
+const getJobsCountForForeman = (foremanName) => {
+	return scheduledServices.value.filter((service) => 
+		service.foreman === foremanName && service.scheduledDate === currentDate.value
+	).length;
+};
+
+const formatTimeDisplay = (time) => {
+	const [hours, minutes] = time.split(':').map(Number);
+	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
+	const ampm = hours >= 12 ? 'PM' : 'AM';
+	return `${displayHour}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+};
+
+// Foremen selection methods
+const toggleAllForemen = () => {
+	if (selectedForemen.value.length === foremen.value.length) {
+		// Deselect all
+		selectedForemen.value = [];
+	} else {
+		// Select all
+		selectedForemen.value = foremen.value.map(f => f.id);
+	}
+};
+
+const toggleForeman = (foremanId) => {
+	const index = selectedForemen.value.indexOf(foremanId);
+	if (index > -1) {
+		selectedForemen.value.splice(index, 1);
+	} else {
+		selectedForemen.value.push(foremanId);
+	}
+};
+
+// Date picker methods
+const onDateSelected = (date) => {
+	if (date) {
+		const dateObj = Array.isArray(date) ? date[0] : date;
+		currentDate.value = dateObj.toISOString().split('T')[0];
+		showDatePicker.value = false;
+	}
+};
+
+const getEventStyle = (event) => {
+	const duration = event.duration;
+	const slots = Math.ceil(duration / 30); // 30-minute slots
+	const height = Math.min(slots * 40 - 4, 200); // Max height to prevent overflow
+
+	return {
+		height: `${height}px`,
+		minHeight: "36px",
+	};
+};
+
+const isCurrentTimeSlot = (date, time) => {
+	const now = new Date();
+	const today = now.toISOString().split("T")[0];
+	const currentTime = `${now.getHours().toString().padStart(2, "0")}:${Math.floor(now.getMinutes() / 30) * 30}`;
+
+	return date === today && time === currentTime;
+};
+
+const selectTimeSlot = (foremanId, time) => {
+	console.log("Selected time slot:", foremanId, time);
+	// This will be used for drag-and-drop functionality
+};
+
+const isInPreviewSlots = (foremanId, time) => {
+	return previewSlots.value.some(slot => slot.foremanId === foremanId && slot.time === time);
+};
+
+const showEventDetails = (event) => {
+	selectedEvent.value = event.event;
+	eventDialog.value = true;
+};
+
+const scheduleService = (service) => {
+	// Placeholder for future drag-and-drop functionality
+	console.log("Scheduling service:", service);
+	// This will be implemented when drag-and-drop is added
+	alert(
+		`Scheduling functionality will be implemented in the future.\nService: ${service.title}`,
+	);
+};
+
+// Drag and Drop methods
+const handleDragStart = (service, event) => {
+	draggedService.value = service;
+	event.dataTransfer.effectAllowed = "move";
+	event.dataTransfer.setData("text/plain", service.id);
+	
+	// Get the dimensions of the dragged element
+	const dragElement = event.target;
+	const rect = dragElement.getBoundingClientRect();
+	
+	// Set the drag image offset to center the element horizontally and position cursor at top
+	const offsetX = rect.width / 2;
+	const offsetY = 10; // Position cursor near the top of the element
+	
+	try {
+		event.dataTransfer.setDragImage(dragElement, offsetX, offsetY);
+	} catch (e) {
+		// Fallback if setDragImage fails
+		console.log("Could not set custom drag image");
+	}
+	
+	// Add visual feedback
+	event.target.style.opacity = '0.5';
+	console.log("Drag started for service:", service.serviceType);
+};
+
+const handleDragEnd = (event) => {
+	// Reset visual feedback
+	event.target.style.opacity = '1';
+	draggedService.value = null;
+	isDragOver.value = false;
+	dragOverSlot.value = null;
+	previewSlots.value = [];
+};
+
+const handleDragOver = (event, foremanId, time) => {
+	event.preventDefault();
+	event.stopPropagation(); // Prevent event bubbling to avoid conflicts with nested elements
+	
+	if (!draggedService.value) return;
+	
+	// Get foreman name from ID - check both all foremen and visible foremen
+	const foreman = foremen.value.find(f => f.id === foremanId);
+	if (!foreman) return;
+	
+	// Check if the slot would be occupied (excluding the current service)
+	const isOccupied = isTimeSlotOccupied(foreman.name, time, draggedService.value.duration, draggedService.value.id);
+	
+	// Calculate which slots would be occupied by this event
+	const wouldOccupySlots = getOccupiedSlots(foremanId, time, draggedService.value.duration);
+	
+	event.dataTransfer.dropEffect = isOccupied ? "none" : "move";
+	
+	// Only update state if it's actually different to prevent flickering
+	const currentSlotKey = `${foremanId}-${time}`;
+	const previousSlotKey = dragOverSlot.value ? `${dragOverSlot.value.foremanId}-${dragOverSlot.value.time}` : null;
+	
+	if (currentSlotKey !== previousSlotKey || dragOverSlot.value?.isOccupied !== isOccupied) {
+		isDragOver.value = true;
+		dragOverSlot.value = { foremanId, time, isOccupied };
+		previewSlots.value = wouldOccupySlots;
+	}
+};
+
+const handleDragLeave = (event) => {
+	// Use a small delay to prevent flickering when moving between child elements
+	setTimeout(() => {
+		// Check if we're still dragging and if the mouse has actually left the calendar area
+		if (!draggedService.value) return;
+		
+		const calendarGrid = document.querySelector('.calendar-grid');
+		if (!calendarGrid) return;
+		
+		const rect = calendarGrid.getBoundingClientRect();
+		const x = event.clientX;
+		const y = event.clientY;
+		
+		// Only clear if mouse is outside the entire calendar grid
+		if (
+			x < rect.left ||
+			x > rect.right ||
+			y < rect.top ||
+			y > rect.bottom
+		) {
+			isDragOver.value = false;
+			dragOverSlot.value = null;
+			previewSlots.value = [];
+		}
+	}, 10);
+};
+
+const handleDrop = async (event, foremanId, time) => {
+	event.preventDefault();
+	event.stopPropagation();
+	
+	if (!draggedService.value) return;
+	
+	// Get foreman name from ID
+	const foreman = foremen.value.find(f => f.id === foremanId);
+	if (!foreman) return;
+	
+	// Check if the slot is occupied (excluding the service being moved)
+	const isOccupied = isTimeSlotOccupied(foreman.name, time, draggedService.value.duration, draggedService.value.id);
+	
+	if (isOccupied) {
+		console.log("Cannot drop here - time slot is occupied");
+		// Reset drag state
+		isDragOver.value = false;
+		dragOverSlot.value = null;
+		previewSlots.value = [];
+		draggedService.value = null;
+		return;
+	}
+	
+	// Convert time to 12-hour format for display
+	const [hours, minutes] = time.split(':').map(Number);
+	const displayHour = hours > 12 ? hours - 12 : hours === 0 ? 12 : hours;
+	const ampm = hours >= 12 ? 'PM' : 'AM';
+	const formattedTime = `${displayHour}:${minutes.toString().padStart(2, '0')} ${ampm}`;
+	
+	// Update the service with scheduling information
+	const serviceIndex = services.value.findIndex(s => s.id === draggedService.value.id);
+	if (serviceIndex !== -1) {
+		const wasScheduled = services.value[serviceIndex].status === 'scheduled';
+		services.value[serviceIndex] = {
+			...services.value[serviceIndex],
+			status: 'scheduled',
+			scheduledDate: currentDate.value,
+			scheduledTime: time,
+			scheduledTimeDisplay: formattedTime,
+			foreman: foreman.name
+		};
+		
+		const action = wasScheduled ? 'Moved' : 'Scheduled';
+		console.log(`${action} ${draggedService.value.serviceType} for ${foreman.name} on ${currentDate.value} at ${formattedTime}`);
+
+		// Call API to persist changes
+		try {
+			await Api.upsertJob({
+				id: draggedService.value.id,
+				scheduledDate: currentDate.value,
+				foreman: foreman.name
+			});
+			notifications.addSuccess("Job scheduled successfully");
+		} catch (error) {
+			console.error("Error scheduling job:", error);
+			notifications.addError("Failed to schedule job");
+		}
+	}
+	
+	// Reset drag state
+	isDragOver.value = false;
+	dragOverSlot.value = null;
+	previewSlots.value = [];
+	draggedService.value = null;
+};
+
+// Handle dropping scheduled items back to unscheduled
+const handleUnscheduledDragOver = (event) => {
+	if (draggedService.value?.status === 'scheduled') {
+		event.preventDefault();
+		event.dataTransfer.dropEffect = "move";
+	}
+};
+
+const handleUnscheduledDragLeave = (event) => {
+	// Visual feedback will be handled by CSS
+};
+
+const handleUnscheduledDrop = async (event) => {
+	event.preventDefault();
+	
+	if (!draggedService.value || draggedService.value.status !== 'scheduled') return;
+	
+	// Update the service to unscheduled status
+	const serviceIndex = services.value.findIndex(s => s.id === draggedService.value.id);
+	if (serviceIndex !== -1) {
+		services.value[serviceIndex] = {
+			...services.value[serviceIndex],
+			status: 'unscheduled',
+			scheduledDate: null,
+			scheduledTime: null,
+			scheduledTimeDisplay: null
+		};
+		
+		console.log(`Unscheduled ${draggedService.value.serviceType}`);
+
+		// Call API to persist changes
+		try {
+			await Api.upsertJob({
+				id: draggedService.value.id,
+				scheduledDate: null,
+				foreman: null
+			});
+			notifications.addSuccess("Job unscheduled successfully");
+		} catch (error) {
+			console.error("Error unscheduling job:", error);
+			notifications.addError("Failed to unschedule job");
+		}
+	}
+	
+	// Reset drag state
+	isDragOver.value = false;
+	dragOverSlot.value = null;
+	previewSlots.value = [];
+	draggedService.value = null;
+};
+
+const fetchProjects = async (date) => {
+	try {
+		const data = await Api.getInstallProjects(date, date);
+		services.value = data;
+		console.log("Loaded install projects:", data);
+	} catch (error) {
+		console.error("Error loading install projects:", error);
+		notifications.addError("Failed to load install projects");
+	}
+};
+
+watch(currentDate, async (newDate) => {
+	await fetchProjects(newDate);
+});
+
+// Lifecycle
+onMounted(async () => {
+	await fetchProjects(currentDate.value);
+});
+</script>
+
+<style scoped>
+.calendar-container {
+	padding: 20px;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+.calendar-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 20px;
+	padding-bottom: 15px;
+	border-bottom: 1px solid var(--surface-border);
+}
+
+.header-controls {
+	display: flex;
+	gap: 12px;
+	align-items: center;
+}
+
+.day-display-btn {
+	font-weight: 600;
+	font-size: 1.1em;
+	color: var(--theme-primary) !important;
+	text-transform: none;
+	letter-spacing: normal;
+	min-width: 320px;
+	max-width: 320px;
+}
+
+.day-display-btn:hover {
+	background-color: rgba(25, 118, 210, 0.08);
+}
+
+.date-text {
+	display: inline-block;
+	text-align: center;
+	width: 100%;
+}
+
+.calendar-main {
+	display: flex;
+	gap: 20px;
+	flex: 1;
+	overflow: hidden;
+}
+
+.calendar-section {
+	flex: 1;
+	overflow: auto;
+}
+
+.daily-calendar {
+	min-width: 800px;
+	background: white;
+	border-radius: 8px;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+	overflow-x: auto;
+}
+
+.calendar-header-row {
+	display: grid;
+	border-bottom: 2px solid var(--surface-border);
+	background-color: var(--surface-hover);
+}
+
+.time-column-header {
+	padding: 16px 8px;
+	font-weight: 600;
+	text-align: center;
+	border-right: 1px solid var(--surface-border);
+	color: var(--theme-text-muted);
+}
+
+.foreman-header {
+	padding: 12px 8px;
+	text-align: center;
+	border-right: 1px solid #e0e0e0;
+	cursor: pointer;
+	transition: background-color 0.2s;
+}
+
+.foreman-header:hover {
+	background-color: var(--surface-hover);
+}
+
+.foreman-name {
+	font-weight: 600;
+	font-size: 0.9em;
+	margin-bottom: 4px;
+	color: var(--theme-primary);
+}
+
+.foreman-jobs {
+	font-size: 0.75em;
+	color: var(--theme-text-muted);
+	font-weight: 500;
+}
+
+.calendar-grid {
+	display: flex;
+	flex-direction: column;
+}
+
+.time-row {
+	display: grid;
+	min-height: 40px;
+	border-bottom: 1px solid var(--surface-border);
+}
+
+.time-row:nth-child(odd) {
+	background-color: var(--surface-hover);
+}
+
+.time-column {
+	padding: 8px;
+	border-right: 1px solid var(--surface-border);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: var(--surface-hover);
+}
+
+.time-label {
+	font-size: 0.75em;
+	color: var(--theme-text-muted);
+	font-weight: 500;
+}
+
+.foreman-column {
+	border-right: 1px solid var(--surface-border);
+	position: relative;
+	cursor: pointer;
+	transition: background-color 0.2s;
+	min-height: 40px;
+}
+
+.foreman-column:hover {
+	background-color: var(--theme-surface-alt);
+}
+
+.foreman-column.current-time {
+	background-color: var(--theme-surface-alt);
+}
+
+.foreman-column.drag-over {
+	background-color: #e8f5e8;
+	border: 2px dashed #4caf50;
+	box-sizing: border-box;
+}
+
+.foreman-column.drag-over-occupied {
+	background-color: #ffebee;
+	border: 2px dashed #f44336;
+	box-sizing: border-box;
+}
+
+.foreman-column.drag-preview {
+	background-color: #e3f2fd;
+	border: 1px solid #2196f3;
+	box-sizing: border-box;
+	opacity: 0.7;
+}
+
+.calendar-event {
+	position: absolute;
+	left: 2px;
+	right: 2px;
+	top: 2px;
+	background: linear-gradient(135deg, #2196f3, #1976d2);
+	color: white;
+	border-radius: 4px;
+	padding: 4px 6px;
+	font-size: 0.75em;
+	cursor: pointer;
+	overflow: hidden;
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+	transition: all 0.2s;
+	z-index: 10;
+}
+
+.calendar-event:hover {
+	transform: scale(1.02);
+	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+}
+
+.calendar-event[draggable="true"] {
+	cursor: grab;
+}
+
+.calendar-event[draggable="true"]:active {
+	cursor: grabbing;
+}
+
+.calendar-event .event-title {
+	font-weight: 600;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	margin-bottom: 1px;
+}
+
+.calendar-event .event-customer {
+	font-size: 0.65em;
+	opacity: 0.9;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.calendar-event .event-time-display {
+	font-size: 0.6em;
+	opacity: 0.8;
+}
+
+.calendar-event.priority-urgent {
+	background: linear-gradient(135deg, #f44336, #d32f2f);
+}
+
+.calendar-event.priority-high {
+	background: linear-gradient(135deg, #ff9800, #f57c00);
+}
+
+.calendar-event.priority-medium {
+	background: linear-gradient(135deg, #2196f3, #1976d2);
+}
+
+.calendar-event.priority-low {
+	background: linear-gradient(135deg, #4caf50, #388e3c);
+}
+
+.unscheduled-section {
+	width: 280px;
+	border-left: 1px solid #e0e0e0;
+	padding-left: 16px;
+	display: flex;
+	flex-direction: column;
+}
+
+.unscheduled-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 12px;
+}
+
+.unscheduled-header h4 {
+	font-size: 1.1em;
+	margin: 0;
+}
+
+.unscheduled-list {
+	flex: 1;
+	overflow-y: auto;
+	max-height: calc(100vh - 200px);
+	transition: all 0.3s ease;
+	border-radius: 8px;
+}
+
+.unscheduled-list.unscheduled-drop-zone {
+	background-color: #e8f5e8;
+	border: 2px dashed #4caf50;
+	box-sizing: border-box;
+}
+
+.unscheduled-item {
+	border-left: 3px solid transparent;
+	transition: all 0.3s ease;
+}
+
+.unscheduled-item:hover {
+	transform: translateX(3px);
+}
+
+.unscheduled-item[draggable="true"] {
+	cursor: grab;
+}
+
+.unscheduled-item[draggable="true"]:active {
+	cursor: grabbing;
+}
+
+.priority-urgent {
+	border-left-color: #f44336 !important;
+}
+
+.priority-high {
+	border-left-color: #ff9800 !important;
+}
+
+.priority-medium {
+	border-left-color: #ffeb3b !important;
+}
+
+.priority-low {
+	border-left-color: #4caf50 !important;
+}
+
+.service-title-compact {
+	font-weight: 600;
+	font-size: 0.9em;
+	color: #1976d2;
+	line-height: 1.2;
+}
+
+.service-customer {
+	font-size: 0.8em;
+	color: #666;
+	margin-top: 2px;
+}
+
+.service-compact-details {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.service-notes-compact {
+	background-color: #f8f9fa;
+	padding: 4px 6px;
+	border-radius: 3px;
+	border-left: 2px solid #2196f3;
+}
+
+.service-notes-compact .text-caption {
+	font-style: italic;
+	color: #666;
+	line-height: 1.3;
+}
+
+.no-unscheduled {
+	text-align: center;
+	padding: 40px 20px;
+	color: #666;
+}
+
+.event-details {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.detail-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+	.calendar-main {
+		flex-direction: column;
+	}
+
+	.unscheduled-section {
+		width: 100%;
+		border-left: none;
+		border-top: 1px solid #e0e0e0;
+		padding-left: 0;
+		padding-top: 20px;
+		max-height: 400px;
+	}
+}
+</style>
\ No newline at end of file