FullCalender is greyed out on click event.
I managed to put the navbar section inside my index file but now the click event in the calender is greyed out so how to fix that?
@{
Layout = null;
}
@using ExpenseTracker.Data;
@using Microsoft.AspNetCore.Identity;
@inject SignInManager<ApplicationUser> SignInManager
@inject UserManager<ApplicationUser> UserManager
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="https://cdn.syncfusion.com/ej2/22.2.5/bootstrap5-dark.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght;300;400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script src="https://cdn.syncfusion.com/ej2/22.2.5/dist/ej2.min.js"></script>
</head>
<body class="e-bigger" style="margin:0px;">
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
<a class="navbar-brand" asp-area="" asp-controller="" asp-action="">ExpenseTracker</a>
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Calender</a>
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="FileManager">Family Documents</a>
<a class="nav-link text-dark" asp-area="" asp-controller="UserRoleManagement" asp-action="Index">User Roles</a>
<ul class="navbar-nav">
@if (SignInManager.IsSignedIn(User))
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserAsync(User)?.Result?.firstName @UserManager.GetUserAsync(User)?.Result?.lastName</a>
</li>
<li class="nav-item">
<form class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Action("Index", "Dashboard", new { area = "" })">
<button type="submit" class="nav-link btn btn-link text-dark">Logout</button>
</form>
</li>
}
else
{
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Register">Register</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Login">Login</a>
</li>
}
</ul>
</div>
</nav>
</header>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.print.css" rel="stylesheet" media="print" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<div id="calender"></div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><span id="eventTitle"></span></h4>
</div>
<div class="modal-body">
<p id="pDetails"></p>
<button id="btnDelete" class="btn btn-danger btn-sm">
<span class="btn-info"></span> Remove
</button>
<button id="btnEdit" class="btn btn-danger btn-sm">
<span class="e-open"></span> Edit
</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var events = [];
var selectedEvent = null;
FetchEventAndrendarCalendar();
function FetchEventAndrendarCalendar() {
events = [];
$.ajax({
type: "GET",
url: "/Home/GetEvents",
success: function (data) {
var events = [];
var selectedEvent = null;
$.each(data.theData2, function (i, v) {
events.push({
eventid: v.EventId,
title: v.theSubject,
description: v.theDescription,
start: moment(v.theStart),
end: v.theEnd != null ? moment(v.theEnd) : null,
color: v.theThemeColor,
allDay: v.theIsFullDay
});
})
GenerateCalender(events);
},
error: function (error) {
alert(error.responseText);
}
})
}
function GenerateCalender(events) {
$('[id*=calender]').fullCalendar('destroy');
$('[id*=calender]').fullCalendar({
showNonCurrentDates: false,
fixedWeekCount: false,
contentHeight: "auto",
handleWindowResize: true,
themeSystem: 'bootstrap3',
defaultDate: new Date(),
timeFormat: 'h(:mm)a',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay,agenda'
},
eventLimit: true,
eventColor: '#378006',
events: events,
eventClick: function (calEvent, jsEvent, view) {
selectedEvent = calEvent;
$('[id*=myModal] [id*=eventTitle]').text(calEvent.title);
var $description = $('<div/>');
$description.append($('<p/>').html('<b>Start:</b>' + calEvent.start.format("DD-MMM-YYYY HH:mm a")));
if (calEvent.end != null) {
$description.append($('<p/>').html('<b>End:</b>' + calEvent.end.format("DD-MMM-YYYY HH:mm a")));
}
$description.append($('<p/>').html('<b>Description:</b>' + calEvent.description));
$('[id*=myModal] [id*=pDetails]').empty().html($description);
$('[id*=myModal]').modal();
}
})
}
$('btnEdit').click(function () {
})
$('#btnDelete').click(function () {
if (selectedEvent != null && confirm('Are you sure you want to delete this event?')) {
console.log(selectedEvent);
$.ajax({
type: "POST",
url: '/home/DeleteEvent',
data: { 'EventID': selectedEvent.eventid },
success: function (data) {
if (data.status) {
//Refresh the calender
FetchEventAndrendarCalendar();
$('#myModal').modal('hide');
}
},
error: function () {
alert('Failed');
}
})
}
})
})
</script>
</body>
</html>
the concerned line is:
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
If I keep it the styling of my navigation is good but the calender click event is greyed out. If I remove it, the click event will work but the styling is bad.
