Codice: Seleziona tutto
CREATE TABLE events (
id INT AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(255) NOT NULL,
start DATETIME NOT NULL,
end DATETIME NULL
);
db.php
Codice: Seleziona tutto
<?php
$host = 'localhost';
$dbname = 'nome_db';
$username ='user_db';
$password = 'pass_db';
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Errore di connessione al database: " . $e->getMessage());
}
?>
Codice: Seleziona tutto
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Calendario Condominiale</title>
<!-- Inclusione di Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Inclusione di FullCalendar CSS -->
<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css" rel="stylesheet">
<style>
#calendar {
max-width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container mt-5">
<h1 class="text-center">Calendario Condominiale</h1>
<div id="calendar"></div>
<!-- Modal per visualizzare l'evento e eliminarlo -->
<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="eventModalLabel">Dettagli Evento</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><strong>Evento:</strong> <span id="eventTitle"></span></p>
<p><strong>Inizio:</strong> <span id="eventStart"></span></p>
<p><strong>Fine:</strong> <span id="eventEnd"></span></p>
<button type="button" class="btn btn-danger" id="deleteEventBtn">Elimina Evento</button>
</div>
</div>
</div>
</div>
<!-- Modal per aggiungere eventi -->
<div class="modal fade" id="addEventModal" tabindex="-1" aria-labelledby="addEventModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addEventModalLabel">Aggiungi Evento</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form id="eventForm">
<div class="mb-3">
<label for="title" class="form-label">Titolo</label>
<input type="text" class="form-control" id="title" required>
</div>
<div class="mb-3">
<label for="start" class="form-label">Data e Ora di Inizio</label>
<input type="datetime-local" class="form-control" id="start" required>
</div>
<div class="mb-3">
<label for="end" class="form-label">Data e Ora di Fine</label>
<input type="datetime-local" class="form-control" id="end" required>
</div>
<button type="submit" class="btn btn-primary">Salva Evento</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Inclusione di jQuery, Bootstrap JS e FullCalendar JS -->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script>
<script>
$(document).ready(function() {
// Variabile globale per l'evento selezionato
var selectedEvent = null;
// Inizializzazione del calendario
var calendar = new FullCalendar.Calendar(document.getElementById('calendar'), {
locale: 'it',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialView: 'dayGridMonth',
events: function(fetchInfo, successCallback, failureCallback) {
// Carica gli eventi dal server
$.ajax({
url: 'load_events.php',
dataType: 'json',
success: function(data) {
successCallback(data);
},
error: function() {
failureCallback();
}
});
},
eventContent: function(arg) {
// Mostra solo l'ora dell'evento
let timeText = document.createElement('div');
timeText.textContent = arg.timeText; // Mostra solo l'ora
return { domNodes: [timeText] };
},
dateClick: function(info) {
// Apri il form per aggiungere un evento
$('#title').val('');
$('#start').val(info.dateStr);
$('#end').val(info.dateStr);
$('#addEventModal').modal('show');
$('#eventForm').off('submit').on('submit', function(e) {
e.preventDefault();
var title = $('#title').val();
var start = $('#start').val();
var end = $('#end').val();
// Salva l'evento nel database
$.ajax({
url: 'add_event.php',
method: 'POST',
data: {
title: title,
start: start,
end: end
},
success: function(response) {
if (response.success) {
calendar.refetchEvents(); // Ricarica gli eventi
$('#addEventModal').modal('hide');
} else {
alert('Errore nel salvataggio dell\'evento.');
}
}
});
});
},
eventClick: function(info) {
// Visualizza il popup con i dettagli e il tasto elimina
selectedEvent = info.event; // Memorizza l'evento selezionato
$('#eventTitle').text(info.event.title);
$('#eventStart').text(info.event.start.toLocaleString());
$('#eventEnd').text(info.event.end ? info.event.end.toLocaleString() : info.event.start.toLocaleString());
$('#eventModal').modal('show');
$('#deleteEventBtn').off('click').on('click', function() {
if (confirm('Sei sicuro di voler eliminare questo evento?')) {
$.ajax({
url: 'delete_event.php',
method: 'POST',
data: { id: selectedEvent.id },
success: function(response) {
if (response.success) {
calendar.refetchEvents();
$('#eventModal').modal('hide');
} else {
alert('Errore nell\'eliminazione dell\'evento.');
}
}
});
}
});
}
});
calendar.render();
});
</script>
<!-- descrizione utilizzo -->
<div class="container mt-4">
<blockquote class="blockquote text-center">
<p class="mb-4">
<strong>Guida per l'utilizzo del calendario condominiale:</strong>
</p>
<p class="mb-3">
<strong>1. Visualizzazione eventi:</strong><br>
Sul calendario sono visualizzati gli orari degli eventi programmati. Per scoprire i dettagli completi di un evento, clicca sull’orario corrispondente.
</p>
<p class="mb-3">
<strong>2. Aggiunta di un evento:</strong><br>
- Clicca su un giorno del calendario.<br>
- Si aprirà un modulo in cui inserire il titolo, l’orario di inizio e fine dell’evento.<br>
- Compila i campi richiesti e clicca su <strong>"Salva Evento"</strong>. L'evento apparirà immediatamente nel calendario.
</p>
<p class="mb-3">
<strong>3. Eliminazione di un evento:</strong><br>
- Clicca sull'orario di un evento già esistente.<br>
- Si aprirà un popup con i dettagli dell'evento.<br>
- Clicca sul pulsante <strong>"Elimina Evento"</strong> per rimuoverlo definitivamente.
</p>
<p class="mb-3">
<strong>4. Compatibilità mobile:</strong><br>
Il calendario è ottimizzato per funzionare su smartphone, tablet e computer. Tuttavia, su dispositivi mobili il layout potrebbe risultare più compatto.
</p>
<footer class="blockquote-footer mt-3">
Questo sistema permette a tutti i condomini di collaborare facilmente nella gestione delle attività comuni. Ciao a tutti vicini ;) Lorenzo.
</footer>
</blockquote>
</div>
<!-- Fine descrizione utilizzo -->
</body>
</html>
Codice: Seleziona tutto
<?php
header('Content-Type: application/json');
// Ottieni i dati dal form
$title = $_POST['title'];
$start = $_POST['start'];
$end = $_POST['end'];
// Connessione al database
$conn = new mysqli('localhost', 'crembnni_lollo', 'ResidencePiacentini!', 'crembnni_piacentini');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Aggiungi l'evento al database
$query = "INSERT INTO events (title, start, end) VALUES ('$title', '$start', '$end')";
if ($conn->query($query) === TRUE) {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}
$conn->close();
?>
Codice: Seleziona tutto
<?php
header('Content-Type: application/json');
$id = $_POST['id'];
// Connessione al database
$conn = new mysqli('localhost', 'crembnni_lollo', 'ResidencePiacentini!', 'crembnni_piacentini');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Eliminazione dell'evento dal database
$query = "DELETE FROM events WHERE id = '$id'";
if ($conn->query($query) === TRUE) {
echo json_encode(['success' => true]);
} else {
echo json_encode(['success' => false]);
}
$conn->close();
?>
Codice: Seleziona tutto
<?php
header('Content-Type: application/json');
// Connessione al database
$conn = new mysqli('localhost', 'crembnni_lollo', 'ResidencePiacentini!', 'crembnni_piacentini');
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// Ottieni tutti gli eventi dal database
$query = "SELECT id, title, start, end FROM events";
$result = $conn->query($query);
$events = [];
while ($row = $result->fetch_assoc()) {
$events[] = [
'id' => $row['id'],
'title' => $row['title'],
'start' => $row['start'],
'end' => $row['end']
];
}
echo json_encode($events);
$conn->close();
?>
Codice: Seleziona tutto
<?php
require 'db.php';
$data = json_decode(file_get_contents('php://input'), true);
$id = $data['id'];
$title = $data['title'];
$start = $data['start'];
$end = $data['end'];
$sql = "UPDATE events SET title = :title, start = :start, end = :end WHERE id = :id";
$stmt = $pdo->prepare($sql);
$stmt->execute(['id' => $id, 'title' => $title, 'start' => $start, 'end' => $end]);
echo "Evento aggiornato con successo!";
?>
1. Visualizzazione eventi:
Sul calendario sono visualizzati gli orari degli eventi programmati. Per scoprire i dettagli completi di un evento, clicca sull’orario corrispondente.
2. Aggiunta di un evento:
- Clicca su un giorno del calendario.
- Si aprirà un modulo in cui inserire il titolo, l’orario di inizio e fine dell’evento.
- Compila i campi richiesti e clicca su "Salva Evento". L'evento apparirà immediatamente nel calendario.
3. Eliminazione di un evento:
- Clicca sull'orario di un evento già esistente.
- Si aprirà un popup con i dettagli dell'evento.
- Clicca sul pulsante "Elimina Evento" per rimuoverlo definitivamente.
4. Compatibilità mobile:
Il calendario è ottimizzato per funzionare su smartphone, tablet e computer. Tuttavia, su dispositivi mobili il layout potrebbe risultare più compatto.
Questo sistema permette a tutti i condomini di collaborare facilmente nella gestione delle attività comuni.