fullcalendar modal not displayed - javascript

I'm trying to setup html modal for fullcalendar in Djnago according to this and this solution, but modal is not displayed [no popup window].
I try to find solutions according to link, but with no results.
Thank You for any solutions.
package imports:
<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<link href='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/interaction#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.js'></script>
script:
<script type='text/javascript'>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pl',
selectable: true,
plugins: ['interaction', 'dayGrid'],
firstDay : 1,
header: {
left: 'today',
center: 'title',
right: 'prev, next',
},
events: [
{% for event in events %}
{
id: '{{event.id}}',
title: '{{event.title}}',
description: '{{event.description}}',
start: '{{event.start_date|date:"Y-m-d"}}',
end: '{{event.end_date|date:"Y-m-d"}}',
color: {% if event.done %}'YellowGreen '{%else%}'SkyBlue '{%endif%},
allDay: false,
},
{% endfor %}
],
eventClick: function(event) {
$('#fullCalModal').modal();
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
},
});
calendar.render();
});
</script>
html:
<body>
<div id='calendar'></div>
</body>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
</div>
</div>
</div>

I've updated bootstrap and added bootstrap.css into HTML.
One file code:
<head>
<script src="https://unpkg.com/jquery#3.4.1/dist/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>
<link href='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.css' rel='stylesheet' />
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://unpkg.com/#fullcalendar/core#4.3.1/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/interaction#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/daygrid#4.3.0/main.min.js'></script>
<script src='https://unpkg.com/#fullcalendar/timegrid#4.3.0/main.min.js'></script>
</head>
<body>
<div id='calendar'></div>
</body>
<div id="fullCalModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"></div>
</div>
</div>
Test
</div>
<script>
function loadCalendar() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
locale: 'pl',
selectable: true,
plugins: ['interaction', 'dayGrid'],
firstDay : 1,
header: {
left: 'today',
center: 'title',
right: 'prev, next',
},
events: [
{
title: 'All Day Event',
description: 'www',
start: '2019-09-03'
},
],
eventClick: function(event) {
console.log('modal', event);
$('#fullCalModal').modal();
$('#modalTitle').html(event.event.title);
$('#modalBody').html(event.event.extendedProps.description);
},
});
calendar.render();
};
if (document.readyState !== 'complete') {
document.addEventListener('DOMContentLoaded', loadCalendar);
} else {
loadCalendar();
}
</script>
Working example online: https://jsfiddle.net/m2xwphLj/

Related

My bootstrap dropdown is not working and I tried everything to make it work as per my knowledge

For some reason, my dropdown menu is not working. I have already added all bootstrap CDN and files that I've found, also the jquery script is coming first, but nothing happens, I click over and over and the button doesn't work. It's an exceptional case where a table is being handled by Javascript, I don't know if this is the problem and I'm not catching it. Please, I would like to ask for some help here to make my dropdown works, thank you!
HTML
<!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>TSS BRA Automation For Unbilled</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Quicksand:wght#300;400;500;600;700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"> crossorigin="anonymous"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="static/styles/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table.min.css"> rel="stylesheet">
<link rel="stylesheet" href="static/css/bootstrap-table.min.css" rel="stylesheet">
<!-- Style CSS -->
<link rel="stylesheet" href="static/styles/css/main-styles.css">
<!-- Style SCSS -->
<link rel="stylesheet" href="static/styles/scss/style.css">
</head>
<body class="main-layout">
<!-- <div class="loader_bg">
<div class="loader"><img src="static/styles/static/images/loading.gif" alt="#" /></div>
</div> -->
<header>
<div class="header_bg">
<div class="header">
<a href="index.html"><img class="logo"
src="https://i.postimg.cc/bwWpnryh/images-removebg-preview.png"
alt="#" />
</a>
</div>
<section class="banner_main">
<div class="container-fluid">
<div class="row d_flex">
<div class="text-bg">
<h1><strong>Welcome to<br/></strong> TSS BRA Automation
for Unbilled</h1>
</div>
</div>
</section>
</div>
</header>
<main>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<div class="center">
<i class="fa-solid fa-upload"></i>
<strong>Upload your files</strong>
</div>
</div>
<div class="cardBody card-block">
<div id="message" class="d-none">
<div class="alert alert-success
alert-dismissible">
<a href="#" class="close"
data-dismiss="alert" aria-label="close">×</a>
<strong>Success!</strong> Files uploaded.
</div>
</div>
<form method="POST" action="/"
enctype="multipart/form-data"
class="form-horizontal" id="form">
<div class="row form-group">
<div class="col-12 col-md-12">
<div class="control-group" id="fields">
<label class="control-label"
for="formFile">
Chis Ativo
</label>
<label class="control-label2"
for="formFile2">
Gis Mensal
</label>
<div class="controls">
<div class="entry_1 upload-input">
<input class="form-control "
name="file_1" type="file"
id="activeChisForm"
accept="xlsx" required>
</div>
<div class="entry_2 upload-input">
<input class="form-control"
name="file_2" type="file"
id="gisForm" accept="xlsx"
required>
</div>
</div>
<button class="submitButton"
type="submit" value="Submit"
id="bsubmit" style="--content:
'Upload';">
<div class="left"></div>
Upload
<div class="right"></div>
</button>
<a target="_blank" href="#"><svg
style="width:2em;height:2em;position:fixed;top:1em;left:1em;opacity:.8;"
viewBox="0 0 24 24"></svg></a>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="card">
<div class="cardBody card-block">
<div class="select">
<select class="form-control" id="locale">
<option value="en-US">English</option>
<option value="es-ES">Español</option>
<option value="pt-BR" selected>Português</option>
</select>
</div>
<div id="toolbar">
<button id="remove" class="btn btn-danger"
disabled>
Delete
</button>
</div>
<table
id="table"
data-toolbar="#toolbar"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-fullscreen="true"
data-height="100"
data-show-columns="true"
data-show-columns-toggle-all="true"
data-detail-view="true"
data-show-export="true"
data-click-to-select="true"
data-detail-formatter="detailFormatter"
data-minimum-count-columns="2"
data-show-pagination-switch="true"
data-pagination="true"
data-id-field="id"
data-page-list="[10, 25, 50, 100, all]"
data-show-footer="true"
data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
data-side-pagination="server"
data-response-handler="responseHandler">
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer">
<div class="container">
<div class="row">
<div class="col-md-12">
<a target=”_blank”
href="https://w3.ibm.com/w3publisher/amq2c-kaizen"><img
class="citech"
src="https://i.postimg.cc/y8qRPTs7/citechlogo.png">
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- <script src="static/styles/js/jquery-3.5.1.js"></script> -->
<script src="static/styles/js/jquery-3.6.2.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table-locale-all.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/extensions/export/bootstrap-table-export.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.3/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.21.2/dist/bootstrap-table-locale-all.min.js'"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
<script type="text/javascript" src="static/styles/js/script.js"></script>
<script type="text/javascript" src="static/styles/js/custom.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap-table.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap-table.min.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="static/styles/js/bootstrap/bootstrap.bundle.js"></script>
</body>
</html>
Javascript
var $table = $('#table')
var $remove = $('#remove')
var selections = []
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id
})
}
function responseHandler(res) {
$.each(res.rows, function (i, row) {
row.state = $.inArray(row.id, selections) !== -1
})
return res
}
function detailFormatter(index, row) {
var html = []
$.each(row, function (key, value) {
html.push('<p><b>' + key + ':</b> ' + value + '</p>')
})
return html.join('')
}
function operateFormatter(value, row, index) {
return [
'<a class="like" href="javascript:void(0)" title="Like">',
'<i class="fa fa-heart"></i>',
'</a> ',
'<a class="remove" href="javascript:void(0)" title="Remove">',
'<i class="fa fa-trash"></i>',
'</a>'
].join('')
}
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('You click like action, row: ' + JSON.stringify(row))
},
'click .remove': function (e, value, row, index) {
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
})
}
}
function totalTextFormatter(data) {
return 'Total'
}
function totalNameFormatter(data) {
return data.length
}
function totalPriceFormatter(data) {
var field = this.field
return '$' + data.map(function (row) {
return +row[field].substring(1)
}).reduce(function (sum, i) {
return sum + i
}, 0)
}
function initTable() {
$table.bootstrapTable('destroy').bootstrapTable({
height: 550,
locale: $('#locale').val(),
columns: [
[{
field: 'state',
checkbox: true,
rowspan: 2,
align: 'center',
valign: 'middle'
}, {
title: 'Item ID',
field: 'id',
rowspan: 2,
align: 'center',
valign: 'middle',
sortable: true,
footerFormatter: totalTextFormatter
}, {
title: 'Item Detail',
colspan: 3,
align: 'center'
}],
[{
field: 'name',
title: 'Item Name',
sortable: true,
footerFormatter: totalNameFormatter,
align: 'center'
}, {
field: 'price',
title: 'Item Price',
sortable: true,
align: 'center',
footerFormatter: totalPriceFormatter
}, {
field: 'operate',
title: 'Item Operate',
align: 'center',
clickToSelect: false,
events: window.operateEvents,
formatter: operateFormatter
}]
]
})
$table.on('check.bs.table uncheck.bs.table ' +
'check-all.bs.table uncheck-all.bs.table',
function () {
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length)
selections = getIdSelections()
})
$table.on('all.bs.table', function (e, name, args) {
console.log(name, args)
})
$remove.onClick(function () {
var ids = getIdSelections()
$table.bootstrapTable('remove', {
field: 'id',
values: ids
})
$remove.prop('disabled', true)
})
}
$(function () {
initTable()
$('#locale').onChange(initTable)
})
Use this CDN for Datatable it will work perfect
https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css

How to add button to a JavaScript based Table with Data from PHP Database?

I want to add a "Start Chat" button for every individual user in the last column to this JavaScript based table with data fetched from PHP database. I don't wish to use <TR><TD> table model cause its not attractive as this one. Also this one has a filter, sorting and search option included in the table. Which makes easier usability with more functions.Have Attached photos for the same...
the one with heading "User List" is the output of code written below.
<?php
session_start();
include("include/connection.php");
if(isset($_SESSION['Username1']))
{
//print_r($_SESSION['Username']);
}
else{
header("location:AdminSignIn.php");
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" type href="Images/favicon.ico">
<title>Admin Panel</title>
<noscript><meta http-equiv="refresh" content="0; url=JSDisabled.html" /></noscript>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="js/Admin.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/Admin.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<style>
</style>
</head>
<body>
<div class="navigation"> The Admin Panel </div>
<div class="split Sidebar" id="SB" style="color:#000000;">
<div class="sidebar_text" id="Connect">Connect</div>
</div>
<!--- Start Of Admin Connection --->
<div class="split Connect_Content" id="Connect_Cnt">
<link type="text/css" href="css/bootstrap-table.css" rel="stylesheet">
<div class="container" style="width:100%;height:95%;margin:1%;">
<div class="col-md-12">
<div class="panel panel-success" style="background-color:#ffffff;color:#000000;font-size:20px;">
<div class="panel-heading" style="background-color:#000000;color:#ffffff;font-family:Monotype Corsiva; font-size:30px; font-weight:bold;">
User List
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<table style="text-align:center;" id="table"
data-show-columns="true"
data-auto-refresh="true"
>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap-table.js"></script>
<script type="text/javascript">
var $table = $('#table');
$table.bootstrapTable({
url: 'include/UserConnectList.php',
search: true,
pagination: true,
buttonsClass: 'primary',
showFooter: true,
minimumCountColumns: 3,
columns: [{
field: 'TbID',
title: 'ID',
sortable: true,
},
{
field: 'TbUsername',
title: 'Username',
sortable: true,
},
{
field: 'TbAge',
title: 'Age',
sortable: true,
},
{
field: 'TbGender',
title: 'Gender',
sortable: true,
},
{
field: 'TbCountry',
title: 'Country',
sortable: true,
},
{
field: 'TbOnline',
title: 'Status',
sortable: true,
},
{
field: 'TbLogin',
title: 'Last Login Time',
sortable: true,
},
{
field: 'TbAccess',
title: 'Access',
sortable: true,
},
{
field: '<button type="submit" class="btn btn-info btn-xl start_chat"></button>',
title: 'Start Chat',
sortable: false,
},
],
});
$(function() {
var auto_refresh = setInterval(function () {
var t = Date.now();
$('#show').load('UserConnectList.php' + t);
}, 5);
});
</script>
</div>
<!--- End Of Admin Connection --->
</body>
</html>
<?php
/* UserConnectList.php*/
require 'connection.php';
$sqltran = mysqli_query($connection, "SELECT * FROM users ")or die(mysqli_error($connection));
$arrVal = array();
$i=1;
while ($rowList = mysqli_fetch_array($sqltran)) {
$name = array(
'TbID' => $i,
'TbUsername' => $rowList['Username'],
'TbGender' => $rowList['Gender'],
'TbAge' => $rowList['Age'],
'TbCountry' => $rowList['Country'],
'TbOnline' => $rowList['Online'],
'TbLogin' => $rowList['LoginDate'],
'TbAccess' => $rowList['Status'],
);
array_push($arrVal, $name);
$i++;
}
echo json_encode($arrVal);
mysqli_close($connection);
?>
Use render to generate the HTML. Notice that I used backticks on that line so that I could insert the ID variable into data-id
{
field: 'TbID',
title: '',
render: value => `<button class="btn btn-info btn-xl start_chat" data-id="${value}">Start Chat</button>`
}
Then create a listener for your buttons
$table.on('click', '.start_chat', function() {
const userId = this.getAttribute('data-id');
// function code here
}

FullCalendar:Uncaught TypeError: $(...).modal is not a function

i've been getting this error for modal pop up
the Error :
Uncaught TypeError: $(...).modal is not a function
at HTMLAnchorElement.eventClick ((index):134)
at t.publiclyTrigger (fullcalendar.min.js:10)
at e.publiclyTrigger (fullcalendar.min.js:9)
at e.handleClick (fullcalendar.min.js:8)
at HTMLAnchorElement. (fullcalendar.min.js:7)
at HTMLDivElement.dispatch (jquery-1.12.4.js:5226)
at HTMLDivElement.elemData.handle (jquery-1.12.4.js:4878)
here's my index.chtm :
#{
ViewBag.Title = "Index";
}
<div id="calender"></div>
<div id="myModal" class="modal" 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>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.css" rel="stylesheet" media="print" />
#section scripts{
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
var events = [];
$.ajax({
type: "GET",
url: "/conge/getConges",
success: function (data) {
$.each(data, function (i, v) {
events.push({
title: v.Subject,
description: v.Description,
start: moment(v.DateDebut),
end: v.DateFin != null ? moment(v.DateFin) : null,
color: v.themecolor,
allDay: v.IsFullDay
});
})
GenerateCalender(events);
},
error: function (error) {
alert('failed');
}
})
function GenerateCalender(events) {
$('#calender').fullCalendar('destroy');
$('#calender').fullCalendar({
contentHeight: 400,
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)
{
$('#myModal #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));
$('#myModal #pDetails').empty().html($description);
$('#myModal').modal();
}
})
}
})
</script>
}
[Solved-updated]

JQuery Datatable header is not aligned with the tbody?

I have set of data that should display in JQuery Datatables with options to filter, and scroll without losing column headers. All features work so far but there is problem with the column header. If you click on the link and check run example you will see the problem. The column header is on the left while tbody is centered. I have tried fixing this problem and changing my HTML code, removing some of the JQuery table attributes but still no success. Please if anyone knows how to fix this problem or if there is any problem with my code please elt me know. Here is example:
$('#btnGet').on('click', function() {
buildTable();
});
var dataTable;
function GenerateTable(tblID) {
// Setup - add a text input to each footer cell
$('#rptTbl thead tr').clone(true).appendTo('#rptTbl thead');
$('#rptTbl thead tr:eq(1) th').each(function(i) {
//var title = $(this).text();
$(this).html('<input type="text" placeholder="Search" />');
$('input', this).on('keyup change', function() {
if (dataTable.column(i).search() !== this.value) {
dataTable.column(i).search(this.value).draw();
}
});
});
dataTable = $('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print',
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
],
orderCellsTop: true,
fixedHeader: {
header: true,
footer: true
},
scrollX: true,
scrollY: "400px",
scrollCollapse: true,
iDisplayLength: 25,
language: {
"emptyTable": "No records were found."
}
});
}
function buildTable() {
var htmlTbl = '<table id="rptTbl" class="table table-bordered"><thead><tr><th>Area</th></tr></thead><tbody><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Eastern</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr><tr><td>Central</td></tr></tbody></table>';
$('#rptData').empty().append(htmlTbl);
GenerateTable('rptTbl');
}
<!DOCTYPE html>
<html>
<head>
<title>Test JQuery Datatables</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- *** Start: CSS for DataTables. *** -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.jqueryui.min.css" />
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css" />
<!-- *** End: CSS for DataTables. *** -->
<script language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- *** Start: JS for DataTables. *** -->
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.jqueryui.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>
<!-- *** End: JS for DataTables. *** -->
</head>
<body>
<div class="container">
<div id="report_filters" class="collapse in">
<div class="row">
<div class="form-group col-xs-10 col-sm-5 col-md-3 col-lg-3">
<button type="button" id="btnGet" class="btn btn-primary btn-block" data-toggle="collapse" data-target="#report_data,#report_filters">Get Report</button>
</div>
</div>
</div>
<div id="report_data" class="collapse">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#report_data,#report_filters">
<span class="glyphicon glyphicon-circle-arrow-left"></span> Go Back
</button>
</div>
</div>
<div id="rptData" class="table-responsive"></div>
</div>
</div>
</body>
</html>
Add a drawCallback function in dataTable options
dataTable = $('#' + tblID).DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'print',
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL'
}
],
orderCellsTop: true,
fixedHeader: {
header: true,
footer: true
},
scrollX: true,
scrollY: "400px",
scrollCollapse: true,
iDisplayLength: 25,
drawCallback: function( settings ) {
// Reset margin to 0 after datatable render
var ele = document.querySelector('.dataTables_scrollBody');
if(ele){
ele = ele.querySelector('.dataTable');
if(ele){
ele.style.margin = 0;
}
}
},
language: {
"emptyTable": "No records were found."
}
});

fullcalendar - change the place of 'prev,next today' button to custom selector?

I'm trying to change the place of the (next,prev today) buttons of fullcalendar to a specific selector. Is this possible or not?
I had tried to use javascript append to selector but the actions of buttons stopped working.
This is my html code:
<div id="header"></div>
<div class="panel panel-default booking-panel">
<div class="panel-heading " style="text-align: center;">
<span class="left" style="float:left; text-transform: uppercase; font-weight: bold;">test </span>
<span id="title" style=" text-transform: uppercase; font-weight: bold;"> Employee </span>
</div>
<div id="calendar"></div>
</div>
I need the three buttons to be placed in .left selector as it's shown in this picture>>
UPDATE
test.php
require_once 'calendar/config.php';
require_once 'calendar/functions.php';
$events = get_events();
$events = get_json($events);
if(!empty($_POST['clickDate'])){
print_r($_POST);
die;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>First</title>
<link href="datatable/css/vendor/font-awesome.min.css" type="text/css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style/style.css" type="text/css">
<!-- Portrait phones and smaller -->
<link rel="stylesheet" media="screen and (max-width: 480px)" href="style/1_portrait_phones_and_smaller-style.css" />
<!-- Landscape phones and portrait tablets -->
<link rel="stylesheet" media="screen and (max-width: 767px)" href="style/2_landscape_phones_and_portrait-style.css" />
<!-- Portrait tablets and small desktops -->
<link rel="stylesheet" media="screen and (min-width: 768px) and (max-width: 991px)" href="style/3_portrait_tablets_and_small_desktops-style.css" />
<!-- Landscape tablets and medium desktops -->
<link rel="stylesheet" media="screen and (min-width: 992px) and (max-width: 1199px)" href="style/4_landscape_tablets_and_medium_desktops-style.css" />
<!-- Large desktops and laptops -->
<link rel="stylesheet" media="screen and (min-width: 1200px)" href="style/5_large_desktops_and_laptops-style.css" />
<!-- Calendar -->
<link href="calendar/DateTimePicker/dist/DateTimePicker.css" rel="stylesheet">
<!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="calendar/bootstrap/css/bootstrap.min.css">-->
<link rel="stylesheet" href="calendar/css/jquery-ui.css">
<link rel="stylesheet" href="calendar/fc/fullcalendar.css">
<link rel="stylesheet" href="calendar/fc/fullcalendar.print.css" media="print">
<link rel="stylesheet" href="calendar/css/style.css">
<script src="calendar/js/jquery-ui.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
$("#header").load("include/header.php");
$("#next").click(function() {
$('#calendar').fullCalendar("next");
});
$("#prev").click(function() {
$('#calendar').fullCalendar("prev");
});
$("#today").click(function() {
$('#calendar').fullCalendar("today");
});
});
</script>
<div id="header"></div>
<button type="button" id="prev">
<
</button>
<button type="button" id="next">
>
</button>
<button type="button" id="today">
Today
</button>
<div id="calendar"></div>
<script>var events = <?php echo $events ?>;</script>
<script src="calendar/fc/lib/moment.min.js"></script>
<script src="calendar/fc/fullcalendar.js"></script>
<!--<script src="fc/lang.ar.js"></script>-->
<script src="calendar/js/main.js"></script>
</body>
main.js
$(document).ready(function() {
$("#calendar").fullCalendar({
eventClick: function( event, jsEvent, view ) {
$(this).css('background-color', 'red');
},
dayClick: function(date, jsEvent, view) {
//var clickDate = date.format();
//$('#start').val(clickDate);
//$('#dialog').dialog('open');
// change the day's background color just for fun
$(this).css('background-color', 'red');
/*$.ajax({
url: 'index.php',
type: 'POST',
data: {clickDate: clickDate},
success: function(res){
console.log(res);
},
error: function(){
alert("ERROR!");
}
});*/
},
header: {
left: 'prev,next today',
right: 'month,agendaWeek,agendaDay,listDay'
},
viewRender: function(view) {
var title = view.title;
$("#externalTitle").html(title);
},
slotDuration : '00:05:00',
//editable: true, //Drag and Drop
theme: true,
eventSources: [
{
events : events,
color : '#0EB6A2',
textColor: '#fff'
}
],
//monthNames: ['كانون الثاني', 'شباط'],
//monthNamesShort: ['ك ث', 'ش'],
//dayNames: ['سبت', 'أحد'],
//dayNamesShort: ['س', 'أ'],
/*events: [
{
title: "Event 1",
start: "2017-11-19"
},
{
title: "Event 2",
start: "2017-11-24"
},
{
title: "Event 3",
start: "2017-12-19"
},
],*/
/*eventSources: [
'file.json'
]*/
});
$('#dialog').dialog({
autoOpen: false,
show: {
effect: 'drop',
duration: 500
},
hide: {
effect: 'clip',
duration: 500
}
});
$('#open').click(function(){
$('#dialog').dialog('open');
});
});
You can't move the standard buttons to another place in the page, as far as I know.
But instead you could:
1) Hide the standard buttons by setting the "header" option such that they are not shown, e.g:
header: {
left: '', //note no "buttons
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
See https://fullcalendar.io/docs/display/header/
2) Make your own buttons which just call fullCalendar's "next", "previous" and "today" methods when clicked, e.g.:
<button type="button" id="prev">
<
</button>
<button type="button" id="next">
>
</button>
<button type="button" id="today">
Today
</button>
$("#next").click(function() {
$("#calendar").fullCalendar("next");
});
$("#prev").click(function() {
$("#calendar").fullCalendar("prev");
});
$("#today").click(function() {
$("#calendar").fullCalendar("today");
});
See https://fullcalendar.io/docs/current_date/next/ , https://fullcalendar.io/docs/current_date/prev/ and https://fullcalendar.io/docs/current_date/today/
You can place these buttons wherever you like in your page.
See http://jsfiddle.net/z8Lpvmyj/1/ for a working demonstration.

Categories

Resources