0
Good morning !
I’m beginner and I’m having trouble catching the action of Click in my Calendar.
https://www.bootstrap-year-calendar.com/#Examples/Full%20example
I need to do exactly this above, but in my case I’m not getting the click actions to register the date of an event and etc.
Could someone please help me ?
UNTIL THE MOMENT IS LIKE THIS:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale = 1, shrink-tp-fit=no ">
<title>CALENDÁRIO OFICIAL</title>
<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.css" />
</head>
<body>
<div data-provide="calendar"></div>
</body>
<script type="text/javascript" src="plugin/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="plugin/js/popper.min.js"></script>
<script type="text/javascript" src="plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/js-year-calendar@latest/dist/js-year-calendar.min.js"></script>
<script src="https://unpkg.com/js-year-calendar@latest/locales/js-year-calendar.pt.js"></script>
<script>
function editEvent(event) {
$('#event-modal input[name="event-index"]').val(event ? event.id : '');
$('#event-modal input[name="event-name"]').val(event ? event.name : '');
$('#event-modal input[name="event-location"]').val(event ? event.location : '');
$('#event-modal input[name="event-start-date"]').datepicker('update', event ? event.startDate : '');
$('#event-modal input[name="event-end-date"]').datepicker('update', event ? event.endDate : '');
$('#event-modal').modal();
}
function deleteEvent(event) {
var dataSource = $('#calendar').data('calendar').getDataSource();
for(var i in dataSource) {
if(dataSource[i].id == event.id) {
dataSource.splice(i, 1);
break;
}
}
$('#calendar').data('calendar').setDataSource(dataSource);
}
function saveEvent() {
var event = {
id: $('#event-modal input[name="event-index"]').val(),
name: $('#event-modal input[name="event-name"]').val(),
location: $('#event-modal input[name="event-location"]').val(),
startDate: $('#event-modal input[name="event-start-date"]').datepicker('getDate'),
endDate: $('#event-modal input[name="event-end-date"]').datepicker('getDate')
}
var dataSource = $('#calendar').data('calendar').getDataSource();
if(event.id) {
for(var i in dataSource) {
if(dataSource[i].id == event.id) {
dataSource[i].name = event.name;
dataSource[i].location = event.location;
dataSource[i].startDate = event.startDate;
dataSource[i].endDate = event.endDate;
}
}
}
else
{
var newId = 0;
for(var i in dataSource) {
if(dataSource[i].id > newId) {
newId = dataSource[i].id;
}
}
newId++;
event.id = newId;
dataSource.push(event);
}
$('#calendar').data('calendar').setDataSource(dataSource);
$('#event-modal').modal('hide');
}
$(function() {
var currentYear = new Date().getFullYear();
$('#calendar').calendar({
enableContextMenu: true,
enableRangeSelection: true,
contextMenuItems:[
{
text: 'Update',
click: editEvent
},
{
text: 'Delete',
click: deleteEvent
}
],
selectRange: function(e) {
editEvent({ startDate: e.startDate, endDate: e.endDate });
},
mouseOnDay: function(e) {
if(e.events.length > 0) {
var content = '';
for(var i in e.events) {
content += '<div class="event-tooltip-content">'
+ '<div class="event-name" style="color:' + e.events[i].color + '">' + e.events[i].name + '</div>'
+ '<div class="event-location">' + e.events[i].location + '</div>'
+ '</div>';
}
$(e.element).popover({
trigger: 'manual',
container: 'body',
html:true,
content: content
});
$(e.element).popover('show');
}
},
mouseOutDay: function(e) {
if(e.events.length > 0) {
$(e.element).popover('hide');
}
},
dayContextMenu: function(e) {
$(e.element).popover('hide');
},
dataSource: [
{
id: 0,
name: 'Google I/O',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 4, 28),
endDate: new Date(currentYear, 4, 29)
},
{
id: 1,
name: 'Microsoft Convergence',
location: 'New Orleans, LA',
startDate: new Date(currentYear, 2, 16),
endDate: new Date(currentYear, 2, 19)
},
{
id: 2,
name: 'Microsoft Build Developer Conference',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 3, 29),
endDate: new Date(currentYear, 4, 1)
},
{
id: 3,
name: 'Apple Special Event',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 1),
endDate: new Date(currentYear, 8, 1)
},
{
id: 4,
name: 'Apple Keynote',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 8, 9),
endDate: new Date(currentYear, 8, 9)
},
{
id: 5,
name: 'Chrome Developer Summit',
location: 'Mountain View, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 18)
},
{
id: 6,
name: 'F8 2015',
location: 'San Francisco, CA',
startDate: new Date(currentYear, 2, 25),
endDate: new Date(currentYear, 2, 26)
},
{
id: 7,
name: 'Yahoo Mobile Developer Conference',
location: 'New York',
startDate: new Date(currentYear, 7, 25),
endDate: new Date(currentYear, 7, 26)
},
{
id: 8,
name: 'Android Developer Conference',
location: 'Santa Clara, CA',
startDate: new Date(currentYear, 11, 1),
endDate: new Date(currentYear, 11, 4)
},
{
id: 9,
name: 'LA Tech Summit',
location: 'Los Angeles, CA',
startDate: new Date(currentYear, 10, 17),
endDate: new Date(currentYear, 10, 17)
}
]
});
$('#save-event').click(function() {
saveEvent();
});
});
</script>
</html>
Ask the question what you’ve tried to do.
– Sam
Master, I put it there ! Thank you for your attention in advance.
– Alisson Lobo