FullCalendar
추천 자료: ASP.NET Core 인증 및 권한 부여
FullCalendar를 ASP.NET Core MVC 프로젝트에서 jQuery를 사용하여 순수 웹 버전으로 통합하려면 다음 단계를 따르세요.
- FullCalendar 라이브러리와 필요한 종속성 설치:
FullCalendar, jQuery 및 Moment.js를 프로젝트에 설치하려면 CDN을 사용할 수 있습니다. 프로젝트의 HTML 파일 (예:
_Layout.cshtml)에 다음 코드를 추가합니다.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
- FullCalendar를 사용하려는 뷰에 캘린더 요소 추가:
뷰 파일 (예:
Index.cshtml)에 캘린더를 표시할 요소를 추가합니다.
<div id="calendar"></div>
- FullCalendar 설정 및 초기화:
뷰 파일에
<script>태그를 추가하여 FullCalendar를 설정하고 초기화합니다. 다음은 기본 설정을 사용한 예입니다.
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
navLinks: true, // can click day/week names to navigate views
editable: true,
eventLimit: true // allow "more" link when too many events
});
});
</script>
- 이벤트 및 추가 설정 적용 (선택 사항):
필요한 경우 FullCalendar에 이벤트를 추가하거나 추가 설정을 적용할 수 있습니다. 예를 들어, 서버에서 이벤트 데이터를 가져오려면 다음과 같이
events속성을 사용할 수 있습니다.
events: '/api/events' // 이벤트 데이터를 반환하는 서버 API 경로
이제 FullCalendar가 ASP.NET Core MVC 프로젝트에 통합되었습니다. 위의 예제와 문서를 참조하여 필요한 기능과 설정을 추가할 수 있습니다. 자세한 정보와 예제는 FullCalendar 공식 문서에서 확인할 수 있습니다: https://fullcalendar.io/docs/v3
Web API로 캘린더 구현하기
아래의 단계를 따라 ASP.NET Core Web API를 만들고 FullCalendar를 사용하여 일단위 스케줄러를 표현하고 각각의 셀에 해당 날짜의 이벤트를 출력하고 해당 셀을 더블 클릭했을 때 이벤트를 생성하는 코드를 작성할 수 있습니다.
- ASP.NET Core Web API 컨트롤러 생성
먼저, 새로운 API 컨트롤러를 만들어 모델과 DbContext 클래스를 사용합니다. Controllers 폴더에 AppointmentController.cs 파일을 생성하고 아래 코드를 추가하세요.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using KodeeOne.Appointments.Data;
using KodeeOne.Appointments.Models;
using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
namespace KodeeOne.Appointments.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class AppointmentController : ControllerBase
{
private readonly AppointmentDbContext _context;
public AppointmentController(AppointmentDbContext context)
{
_context = context;
}
// GET: api/Appointment
[HttpGet]
public async Task<ActionResult<IEnumerable<Appointment>>> GetAppointments()
{
return await _context.Appointments.ToListAsync();
}
// POST: api/Appointment
[HttpPost]
public async Task<ActionResult<Appointment>> CreateAppointment(Appointment appointment)
{
_context.Appointments.Add(appointment);
await _context.SaveChangesAsync();
return CreatedAtAction(nameof(GetAppointments), new { id = appointment.Id }, appointment);
}
}
}
- FullCalendar 설정 및 이벤트 처리 업데이트
이제, FullCalendar를 사용하여 일단위 스케줄러를 표현하고 각각의 셀에 해당 날짜의 이벤트를 출력하고 해당 셀을 더블 클릭했을 때 이벤트를 생성하는 코드를 작성합니다. 뷰 파일 (예: Index.cshtml)에 아래 코드를 추가하세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>FullCalendar - Day View Scheduler</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js"></script>
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'agendaDay'
},
defaultView: 'agendaDay',
navLinks: true,
editable: true,
eventLimit: true,
events: '/api/Appointment',
selectable: true,
selectHelper: true,
select: function(start, end) {
var title = prompt('Event Title:');
if (title) {
var eventData = {
title: title,
start: start,
end: end
};
calendar.fullCalendar('renderEvent', eventData, true);
$.ajax({
type: 'POST',
url: '/api/Appointment',
contentType: 'application/json',
data: JSON.stringify({
title: title,
startTime: start.toISOString(),
endTime: end.toISOString()
}),
success: function (response) {
console.log('Event created:', response);
},
error: function (error) {
console.error('Error creating event:', error);
}
});
}
calendar.fullCalendar('unselect');
}
});
});
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
위의 코드는 FullCalendar를 사용하여 일단위 스케줄러를 표현하고 이벤트를 불러오는 설정을 적용합니다. 또한, 셀을 더블 클릭하여 이벤트를 생성하고 해당 이벤트를 서버에 저장하는 기능을 구현합니다. 이벤트를 생성할 때 startTime과 endTime을 사용하고 있는데, 이는 Appointment 모델에 있는 Start와 End에 매핑됩니다. 여기서 필요한 추가 필드를 자유롭게 추가할 수 있습니다.
좀 더 자세한 모양의 이벤트 등록 폼
FullCalendar에서 이벤트를 등록하는 Bootstrap 5 모달 폼을 구현하려면 다음 단계를 따르세요.
- FullCalendar 라이브러리와 필요한 종속성 설치:
HTML 파일의
태그 안에 아래의 코드를 추가하거나, 프로젝트에 필요한 파일들을 추가해주세요.<!-- FullCalendar dependencies -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.0/main.min.css" integrity="sha512-RlGItx9qaGz5r3Cx5rJxnjwG7Hn5xYeZgg7UuTY6U8Vn9pB6GdV6UuB6Urg2w+uCV6VQZ0d6YRakD5P/0j9/3g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.0/main.min.js" integrity="sha512-6LVuZgtGndnEYf7Gn8T+9XyjTqmlfwwanMnD8gJv+L3TR4di4KzYXDZt8v4zXGyEORJyRjWkF8bsSfC3/4M4jYg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
- FullCalendar 초기화 및 이벤트 핸들러 추가:
HTML 파일에 아래 코드를 추가하여 FullCalendar를 초기화하고, 이벤트를 클릭하거나 새 이벤트를 만들 때 모달 폼을 보여주도록 이벤트 핸들러를 추가하세요.
<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
eventClick: function (info) {
// 이벤트 클릭 시, 이벤트 수정 모달 폼을 여기에 표시하세요.
},
dateClick: function (info) {
// 새 이벤트를 만들려면 여기에서 모달 폼을 표시하세요.
}
});
calendar.render();
});
</script>
- 이벤트 등록 모달 폼 추가:
ModalForm.razor 및 ModalForm.razor.cs 파일에 작성된 코드를 참조하여 모달 폼을 구현해주세요. 위의 코드에 이벤트 클릭 및 날짜 클릭 이벤트 핸들러에서 이 모달 폼을 표시하도록 설정하세요.
<!-- 이벤트 등록 모달 폼 -->
<div class="modal" tabindex="-1" id="eventModal">
...
</div>
- 이벤트 클릭 및 날짜 클릭 이벤트 핸들러 수정:
이벤트를 클릭하거나 새 이벤트를 만들 때 이벤트 등록 모달 폼을 보여주도록 이벤트 핸들러를 수정하세요. 이를 위해 eventClick 및 dateClick 이벤트 핸들러를 아래와 같이 수정합니다.
eventClick: function (info) {
// 이벤트 클릭 시, 이벤트 수정 모달 폼을 표시하세요.
showModalForm(info.event); // info.event 객체를 사용하여 모달 폼을 표시하세요.
},
dateClick: function (info) {
// 새 이벤트를 만들려면 여기에서 모달 폼을 표시하세요.
showModalForm(); // 새 이벤트를 위한 빈 모달 폼을 표시하세요.
}
- 모달 폼을 표시하는 함수 추가:
showModalForm 함수를 추가하여 이벤트 정보를 기반으로 모달 폼을 표시하고, 모달 폼의 입력란을 채우세요.
function showModalForm(event) {
var eventModal = new bootstrap.Modal(document.getElementById('eventModal'));
if (event) {
// 이벤트 수정 모드
// 모달 폼의 입력란에 이벤트 정보를 채우세요.
// 예: document.getElementById('inputTitle').value = event.title;
} else {
// 새 이벤트 생성 모드
// 모달 폼의 입력란을 비워주세요.
// 예: document.getElementById('inputTitle').value = '';
}
eventModal.show(); // 모달 폼을 표시하세요.
}
- 모달 폼 저장 버튼 클릭 이벤트 핸들러 추가:
모달 폼의 "저장" 버튼이 클릭되면, 이벤트를 생성하거나 수정하는 함수를 호출하세요. 이를 위해 버튼에 클릭 이벤트 리스너를 추가하세요.
<button type="button" class="btn btn-primary" onclick="saveEvent()">저장</button>
- 이벤트 생성 및 수정 함수 추가:
이벤트를 생성하거나 수정하는 함수인 saveEvent를 추가하세요. 이 함수는 FullCalendar 인스턴스에 이벤트를 추가하거나 수정하고, 모달 폼을 숨깁니다.
function saveEvent() {
// 이벤트 정보를 입력란에서 가져오세요.
// 예: var title = document.getElementById('inputTitle').value;
if (event) {
// 이벤트 수정
// 수정된 이벤트 정보로 이벤트 객체를 업데이트하세요.
// 예: event.setProp('title', title);
} else {
// 새 이벤트 생성
// 새 이벤트 객체를 생성하고, 이벤트 정보를 설정하세요.
// 예: var newEvent = { title: title, start: selectedDate };
// FullCalendar 인스턴스에 새 이벤트를 추가하세요.
// 예: calendar.addEvent(newEvent);
}
// 모달 폼을 숨기세요.
var eventModal = new bootstrap.Modal(document.getElementById('eventModal'));
eventModal.hide();
}
이제 FullCalendar에서 이벤트를 클릭하거나 날짜를 클릭하면 Bootstrap 5 모달 폼이 표시되고, 이벤트를 생성하거나 수정할 수 있습니다. 위 코드는 기본 구조이며, 실제 구현에서는 추가적인 유효성 검사, 입력란 초기화 및 서버와의 통신을 고려해야 합니다.
전체 소스 코드
아래는 1단계부터 7단계까지의 과정을 완료한 Index.cshtml 페이지의 전체 소스입니다. 이 예제는 HTML, JavaScript, CSS를 모두 포함하고 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FullCalendar with Bootstrap 5 Modal</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- FullCalendar CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.css" />
<style>
/* 여기에 추가적인 CSS 스타일을 적용하세요. */
</style>
</head>
<body>
<div class="container">
<div id="calendar"></div>
</div>
<!-- Event Modal -->
<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">New Event</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- 여기에 이벤트 정보 입력란을 추가하세요. 예: -->
<div class="mb-3">
<label for="inputTitle" class="form-label">Title</label>
<input type="text" class="form-control" id="inputTitle">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="saveEvent()">Save</button>
</div>
</div>
</div>
</div>
<!-- jQuery, Popper.js, Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.11.6/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<!-- FullCalendar JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.10.2/fullcalendar.min.js" crossorigin="anonymous"></script>
<script>
// 여기에 JavaScript 코드를 작성하세요.
// 변수 선언
var calendar;
var event;
// FullCalendar 초기화
$(document).ready(function () {
calendar = $('#calendar').fullCalendar({
// FullCalendar 옵션 설정
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
navLinks: true,
selectable: true,
selectHelper: true,
editable: true,
eventLimit: true,
// 이벤트 클릭 이벤트 처리
eventClick: function (calEvent, jsEvent, view) {
event = calEvent;
$('#inputTitle').val(calEvent.title);
$('#eventModalLabel').text('Edit Event');
$('#eventModal').modal('show');
},
// 날짜 클릭 이벤트 처리
dayClick: function (date, jsEvent, view) {
event = null;
$('#inputTitle').val('');
$('#eventModalLabel').text('New Event');
$('#eventModal').modal('show');
},
});
});
// 이벤트 생성 및 수정 함수 추가
function saveEvent() {
var title = $('#inputTitle').val();
if (title) {
var eventData = {
title: title,
start: event ? event.start : $('#calendar').fullCalendar('getDate'),
end: event ? event.end : null,
};
if (event) {
// 이벤트 수정
event.title = title;
$('#calendar').fullCalendar('updateEvent', event);
} else {
// 이벤트 생성
$('#calendar').fullCalendar('renderEvent', eventData, true);
}
$('#eventModal').modal('hide');
} else {
alert('Title is required');
}
}
</script>
</body>
</html>
위의 소스코드에서 FullCalendar 초기화 부분에 이벤트 클릭 이벤트 처리, 날짜 클릭 이벤트 처리, 이벤트 생성 및 수정 함수 추가 등이 포함되어 있습니다. 이제 이 코드를 사용하여 이벤트를 추가, 편집할 수 있는 Bootstrap 5 모달 폼을 FullCalendar와 함께 사용할 수 있습니다.
추천 자료: .NET Blazor에 대해 알아보시겠어요? .NET Blazor 알아보기를 확인해보세요!