Can't display bootstrap year calendar correctly and trouble with date picker

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



Can't display bootstrap year calendar correctly and trouble with date picker



I am trying to implement bootstrap-year-calendar on my website, but I am having some troubles with the JavaScript functionality and with how the calendar displays on my website.


JavaScript



I want to display the calendar horizontally exactly like the example shown on the link before, but all I can is to display it vertically, so I need to scroll down to see some months;



check how it displays on my website.



check how it displays on my website.



The other trouble I am having is when creating new events, when I try picking a date, it gives me this error :



it gives me this error.



Also when trying to update or delete existing events, the js works but does nothing.



You can check all my html here:


<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">

<title>BIMMS - Homepage</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom fonts for this template-->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">

<!-- Page level plugin CSS-->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">

<!-- Custom styles for this template-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />

<link href="css/sb-admin.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/bootstrap-year-calendar/bootstrap-year-calendar.css">
<link rel="stylesheet" href="vendor/bootstrap-year-calendar/bootstrap-year-calendar.min.css">
<script src="vendor/chart.js/Chart.min.js"></script>
<script src='vendor/fullcalendar/moment.min.js'></script>
<script src='vendor/fullcalendar/jquery.min.js'></script>
<script src="vendor/bootstrap-year-calendar/bootstrap-year-calendar.js"></script>
<script src="vendor/bootstrap-year-calendar/bootstrap-year-calendar.min.js"></script>
<script src="js/calendar.js"></script>

</head>

<body id="page-top">
<nav class="navbar navbar-expand navbar-light static-top" style="background-color:#e9ecef;">

<a class="navbar-brand mr-1" href="index.html"><img src="img/bimms.png" width="190" class="d-inline-block align-top"></a>

<button class="btn btn-link btn-sm text-black-50 order-1 order-sm-0" id="sidebarToggle" href="#">
<i class="fas fa-bars"></i>
</button>

<!-- Navbar Search -->
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary my-2 my-sm-0" type="button">
<i class="fas fa-search"></i>
</button>
</div>
</div>
</form>

<!-- Navbar -->
<ul class="navbar-nav ml-auto ml-md-0">
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-bell fa-fw"></i>
<span class="badge badge-danger">9+</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown no-arrow mx-1">
<a class="nav-link dropdown-toggle" href="#" id="messagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-envelope fa-fw"></i>
<span class="badge badge-danger">7</span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="messagesDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-user-circle fa-fw"></i>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
<a class="dropdown-item" href="usersettings.html">Settings</a>
<a class="dropdown-item" href="#">Activity Log</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">Logout</a>
</div>
</li>
</ul>

</nav>
<div id="wrapper">
<!-- Sidebar -->
<ul class="sidebar navbar-nav">
<li class="nav-item">
<a class="nav-link" href="loggedin.html">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-fw fa-folder"></i>
<span>Projects</span>
</a>
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
<h6 class="dropdown-header">Active Projects</h6>
<a class="dropdown-item" href="project.html">Data Center</a>
<a class="dropdown-item" href="#">Ulster University</a>
<div class="dropdown-divider"></div>
<h6 class="dropdown-header">Manage Projects</h6>
<a class="dropdown-item" href="newproject.html">New Project</a>
<a class="dropdown-item" href="newsubproject.html">New Sub-project</a>
<a class="dropdown-item" href="#">Edit Project</a>


</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-fw fa-chart-area"></i>
<span>Project Analysis</span>
</a>
<div class="dropdown-menu" aria-labelledby="pagesDropdown">
<h6 class="dropdown-header">Active Projects</h6>
<a class="dropdown-item" href="charts.html">Data Center</a>
<a class="dropdown-item" href="#">Ulster University</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="tables.html">
<i class="fas fa-fw fa-database"></i>
<span>Database</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="tasks.html">
<i class="fas fa-fw fa-tasks"></i>
<span>Tasks</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="calendar.html">
<i class="fas fa-fw fa-calendar"></i>
<span>Calendar</span></a>
</li>

</ul>

<div id="content-wrapper">

<div class="container-fluid">

<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item active">Calendar</li>
</ol>
<!--Content-->

<div class="container">


<div class='calendar' id="calendar"></div>

</div>

<!-- Sticky Footer -->
<footer class="sticky-footer">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © BIMMS 2018</span>
</div>
</div>
</footer>

</div>
<!-- /.content-wrapper -->

</div>
<!-- /#wrapper -->


<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.html">Logout</a>
</div>
</div>
</div>
</div>


<!-- Bootstrap core JavaScript-->

<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Page level plugin JavaScript-->

<script src="vendor/datatables/jquery.dataTables.js"></script>
<script src="vendor/datatables/dataTables.bootstrap4.js"></script>

<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>

<!-- Demo scripts for this page-->
<script src="js/demo/datatables-demo.js"></script>
<script src="js/demo/chart-area-demo.js"></script>





</body>

</html>



Also the calendar js file:


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();
);
);



I am not sure if this is the best way to expose the question so if you have any comments on how to do it better feel free to say it in the comments.



Thank you.




1 Answer
1



For your horizontal issue, you can import some CSS to this project and make it horizontal instead of vertical shape.


CSS



I suggest you use flexbox technics:


flexbox


.wrapper-class
display: flex;
flex-direction: row;



And some more CSS for a better view, It's up to you. But about your JavaScript errors. I saw them, they are your mistake to not the library. seek and find where you make a mistake.


CSS


JavaScript



For example:


TypeError: null is not an object (evaluating 't.length')



It means you write something that has no length property.



I advise you, putting large questions on Stack Overflow never reach to answer except with bounty or some times a little chance.


Stack Overflow



Good luck





I tried using your suggestion and I just moved the columns where it appears the months to the right side of the page. I was thinking more like the example in the bootstrap year calendar website, displaying 4 months per row for example. Do you have any idea why it didn't work?
– Bruno Ribeiro da Silva
Aug 8 at 13:29






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Image
Clash Royale CLAN TAG #URR8PPP Firebase Auth - with Email and Password - Check user already registered I want to check when a user attempts to signup with createUserWithEmailAndPassword() in Firebase user Authentication method, this user is already registered with my app. createUserWithEmailAndPassword() 8 Answers 8 To detect whether a user with that email address already exists, you can detect when the call to createUserWithEmailAndPassword () fails with auth/email-already-in-use . I see that @Srinivasan just posted an answer for this. createUserWithEmailAndPassword () auth/email-already-in-use Alternatively, you can detect that an email address is already used by calling fetchSignInMethodsForEmail() (previous called fetchProvidersForEmail() ). fetchSignInMethodsForEmail() fetchProvidersForEmail() When the user trying to create an user with same email address, the task response will be "Response: The email address is already in use by another account." mFirebas...
Read more

Dynamically update html content plain JS

Image
Clash Royale CLAN TAG #URR8PPP Dynamically update html content plain JS So I have a script bound in my index.html, which literally has to fetch an array of jsons from an api, then dynamically update my page when get response. But as a result I'm getting an as the only update of my page. here is my script fetch(url) .then((resp) => resp.json()) .then((resp) => resp.results.forEach(item => fetch(item.url) .then((response)=> response.json()) .then((response) => pokeArr.push(response)) .catch(console.log) ) ).catch(console.log) const filler = () => if(!pokeArr) return 0 pokeArr.map((i,j)=> return `<tr>$i.name</tr>` ) const pokeindex = () => document.getElementById('a').appendChild(document.createElement(filler())) pokeindex() When I'm consoling it, I can see in the console all the responses I get, so I'm at least doing the fetching part right. What's parberakan ? What's pokeArr ? – T.J. Crowder Aug 8 at 12...
Read more

Creating a leaderboard in HTML/JS

Image
Clash Royale CLAN TAG #URR8PPP Creating a leaderboard in HTML/JS I'm trying to create a top 10 leaderboard, for now, I've only implemented 3 players, but I'm coming across an issue. My script doesn't seem to be outputting anything on webpage. The purpose of the script is to compare 3 arrays, player1,player2,and player3 solely based off of score. Which is the 2nd index of each array. I want the script to list the players in order of highest score. This method doesn't really seem to be efficient, especially when I'll have to add 7 more players. Could someone suggest perhaps an easier approach, as well as show me why my script wont output the info. Here's the JS function leaderboard() { var player1 = name:"Thomas",date:"01/23/18",score:"201"; var player2 = name:"Michael",date:"03/24/17",score:"943"; var player3 = Name:"Lisa",date:"06/04/18",Score:"79"; if(player1[2]...
Read more