William-H-M
commented
6 years ago At least you put some code one we have no idea what's going.... so help us to help you...
Closed GitKat closed 6 years ago
William-H-M
commented
6 years ago At least you put some code one we have no idea what's going.... so help us to help you...
GitKat
commented
6 years ago @William-H-M
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css"
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css"
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-year-calendar/1.1.1/css/bootstrap-year-calendar.css
https://code.jquery.com/jquery-3.3.1.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js
https://cdnjs.cloudflare.com/ajax/libs/bootstrap-year-calendar/1.1.1/js/bootstrap-year-calendar.js
<!-- Page Content Holder -->
<div id="content">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<span><div class="heading">Settings > <span class="sub-heading"> Calendar Sheet</span> </div> </span>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="width:230px; float:right;">
<i class="glyphicon glyphicon-user"></i>
<ul class="nav navbar-nav navbar-right">
<div class="admin-panel">
<div>Welcome, <span class="admin-bold">Admin</span></div>
</div>
<a href="//maintenance.itechhand.com/admin/signout.php"><div class="on-hover" id="logout-btn">Logout</div> </a>
</ul>
</div>
</div>
</nav>
<?php echo "<h2>".$row['calendar_name']."</h2><br>"; ?>
<div id="title">
<div class="site-content">
<h1>Bootstrap Year Calendar</h1>
<h2>The fully customizable year calendar widget, for bootstrap !</h2>
</div>
</div>
<div id="main">
<div class="site-content">
<p>
The widget provides a calendar annual view. You can navigate between years.
</p>
<code>$('#calendar').calendar(options);</code>
</div>
<div id="calendar"></div>
</div>
<div id="footer">
<div class="site-content">
</div>
</div>
</div>
<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>So here it is the plain and simplest code i paste in my webpage but modal wont open and no error shown in the console either
William-H-M
commented
6 years ago @GitKat where's is your Bootstrap modal? I don't see it on the code, if you don't create the modal is never gonna show up
GitKat
commented
6 years ago Thank you so much. I added the modal and it working now. When I think big, I left small things to note. its working now. Thanks for helping me !
modal are not working like in the Full Example.. i just pulled all my hair trying it million times