We Keep Coding

how to update event in fullcalendar 5 when click on button?

i create fullcalendar5, in fullcalendar5 update is done by dragging event and changing their place. but in my case update done when i click button update.
when i click on event it show form edit event, i want when i edit title value and click button edit title event change.
i try this code but not work ,I believe callendar 5 has a predefined function, in edit , i search but i can't find it.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="container main">
<div class="modal fade mb-3" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-add" style="background-color: #e1b058 ; color: white !important;">
<h5 class="modal-title " id="exampleModalLabel">Nouvelle Notificaton </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Titre de la tâche</label>
<input type="text" class="form-control" id="titre" name="name" required >
<span id="titleError" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Date de la tâche</label>
<input type="datetime-local" class="form-control" name="datee" id="date" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="edit-event"><i class="fas fa-save"></i> edit </button>
</div>
</div>
</div>
</div>
<div class="card mb-4 mt-3 p-2">
<div id='calendar'></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
eventColor: 'orange',
editable: true,
events: [
{
id: '1',
title: 'All Day',
start: '2022-09-01'
}
],
eventClick: function(event){
$('#exampleModal').modal('toggle');
$('#titre').val(event.event.title);
$('#date').val(event.event.start);
$('#edit-event').on("click", function(){
event.event.title = $('#titre').val();
$('#exampleModal').modal('hide');
});
},
});
calendar.render();
});
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>

As per the documentation of the Event object :
All properties are read-only
Thus, you should use setProp() to update the title property.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js'></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="container main">
<div class="modal fade mb-3" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header modal-add" style="background-color: #e1b058 ; color: white !important;">
<h5 class="modal-title " id="exampleModalLabel">Nouvelle Notificaton </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Titre de la tâche</label>
<input type="text" class="form-control" id="titre" name="name" required >
<span id="titleError" class="text-danger"></span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputPassword1">Date de la tâche</label>
<input type="datetime-local" class="form-control" name="datee" id="date" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-success" id="edit-event"><i class="fas fa-save"></i> edit </button>
</div>
</div>
</div>
</div>
<div class="card mb-4 mt-3 p-2">
<div id='calendar'></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
eventColor: 'orange',
editable: true,
events: [
{
id: '1',
title: 'All Day',
start: '2022-09-01'
}
],
eventClick: function(event){
$('#exampleModal').modal('toggle');
$('#titre').val(event.event.title);
$('#date').val(event.event.start);
$('#edit-event').on("click", function(){
event.event.setProp("title", $('#titre').val());
$('#exampleModal').modal('hide');
});
},
});
calendar.render();
});
</script>
</div>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src ="https://cdn.datatables.net/buttons/1.7.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>

bootstrap modal1 is not close until modal2 close

I am trying to get a modal pop-up window from another modal pop-up
window. when i click the link from the first pop-up window, the second
pop-up window is opening, but the first one not getting closed.
I tried but not working properly.
Data target is not work because List item theme JavaScript is conflict.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
function showpopup(id)
{
$("#textid").val(id);
$("#myModal").modal('show');
//alert();
}
function forgotpopup()
{
$("#myModal").modal('hide');
$("#ForGot").modal('show');
}
</script>
<article>
<div id="main-wrapper" class="container">
<a class="btn btn-primary" value="" data-toggle="modal" class="btn btn-primary" onclick="showpopup(<?php echo $fetch_package['cID'];?>);" style=" background:#ee8f22 ;">CLICK HERE</a><br>
</div>
</article>
<div class="container">
<div class="modal fade" id="myModal" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<center><h4 class="modal-title">Login</h4></center>
</div>
<div class="modal-body" style="padding:30px 40px;">
<form role="form" method="post">
<div class="form-group">
<label for="usrname" style="font-weight: normal; font-size: 14px;">Username</label>
<input type="text" class="form-control" id="email_id" placeholder="Enter email" name="email_id" required>
</div>
<div class="form-group">
<label for="psw" style="font-weight: normal; font-size: 14px;"> Password </label>
<input type="password" class="form-control" name="password" id="password" placeholder="Enter password" required>
</div>
<div class="form-group pull-left" style="width:100%; border:0px solid ;">
<input type="checkbox" >
<label style="font-weight: normal; font-size: 14px; margin-top:-27px; margin-left:23px;"> Remember me</label>
</div>
<center>
<button type="submit" class="btn" style="margin-top:15px; background:#ee8f22 ;color:#fff; " name="submit">LOGIN</button>
<p> Forgot Password </p>
<p>Not a member? <a href="#" >Sign Up</a></p>
</center>
<input type="hidden" name="txtid" id="textid" value="">
</form>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="ForGot" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="text-align:center;">Forgot Password</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="reused_form">
<h6>Enter your email associated with your account to get link to reset the password.</h6>
<input type="text" required>
</form>
</div>
</div>
</div>
</div>
</div>

Bootstrap modal grid layout missing padding

I've got a modal with a grid layout because I put the labels above each field. That mostly works but they fill the entire Modal running right up to the left/right edges. I don't seem to have that trouble with the demo from the bootstrap site but those are text fields instead of and tags. I played around with the form-control class but that seemed to make matters worse. Is there a class I'm missing?
Here's a JSfiddle of my code: https://jsfiddle.net/jdnag6zx/
<!DOCTYPE html>
<html>
<!--https://jsfiddle.net/jdnag6zx/-->
<head>
<title>Bootstrap 3</title>
</head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<label for="column-type" class="col-lg-4 control-label">Date</label>
<label for="column-type" class="col-lg-4 control-label">Separator</label>
<label for="column-type" class="col-lg-4 control-label">Example</label>
</div>
<div class="row">
<select class="col-lg-4" id="date-format" >
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
<select class="col-lg-4" id="date-separator">
<option>/</option>
<option>-</option>
</select>
<input class="col-lg-4" id="date-example" value="1-1-2017"></input>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>

Remove the .row classes from .modal-body https://jsfiddle.net/jdnag6zx/1/

This is a better approach!
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Dates
<div id="dates" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>New Map</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<label for="column-type" class="control-label">Date</label>
<select class="form-control" id="date-format">
<option>1/1/2017</option>
<option>2/1/2017</option>
<option>3/1/2017</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Separator</label>
<select class="form-control" id="date-separator">
<option>/</option>
<option>-</option>
</select>
</div>
<div class="col-sm-4">
<label for="column-type" class="control-label">Example</label>
<input class="form-control" id="date-example" value="1-1-2017" />
</div>
</div>
</div>
<div class="modal-footer">
Close
Continue
</div>
</form>
</div>
</div>
</div>

Use bootstrap table instead of cols check this fiddle

I am getting an error: Object doesn't support property or method 'datepicker'

I am getting an error when i am using datepicker .The code breaks at datepicker.js
Here I am attaching my code
datepicker.js
$(function () {
$('.date-picker').datepicker({
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function (dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
the html page where my datepicker should be displayed:
ReportDetails.html
<div ng-controller="headerCtrl">
<div class="container" style="padding-top:20px;">
<div ng-app="TimeSheet" data-ng-controller="headerCtrl" class="container">
<div ng-show="error" class="alert alert-danger alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<p>{{ error }}</p>
</div>
<p><a data-ng-click="showadd()" href="javascript:;" class="btn btn-primary">Generate Report</a></p>
<div class="modal fade" id="userModel" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
<h4 class="modal-title" id="myModalLabel" ng-hide="editMode">Add Project ID</h4>
<h4 class="modal-title" id="myModalLabel" ng-show="editMode">Edit Project ID</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" role="form" name="adduserform">
<div class="form-group">
<label for="title" class="col-sm-2 control-label">UserID</label>
<div class="col-sm-10">
<select data-ng-model="user.userid" class="form-control" id="title" required>
<option value="" selected="selected">(Select User ID)</option>
<option value="user1">user1</option>
<option value="user2">user2</option>
<option value="user3">user3</option>
<option value="user4">user4</option>
</select>
<!--<input type="text" data-ng-model="user.userid" class="form-control" id="title" placeholder="Enter your User ID" required title="Enter your UserID" />-->
</div>
</div>
<div class="form-group">
<label for="title" class="col-sm-2 control-label">Status</label>
<div class="col-sm-10">
Active <input name="Status" type="radio" data-ng-model="user.ResultStatus" value="Active" required title="Choose status">
In-Active <input name="Status" type="radio" data-ng-model="user.ResultStatus" value="InActive" required title="Choose status">
</div>
</div>
<div class="form-group">
<label for="startDate" class="col-sm-2 control-label">Date</label>
<div class="col-sm-10">
<input name="startDate" data-ng-model="user.date" id="startDate" class="date-picker" />
<!--<input type="text" data-ng-model="user.projectid" class="form-control" id="title" placeholder="Enter your Project ID" required title="Enter your ProjectID" />-->
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<span data-ng-hide="editMode">
<input type="submit" value="Add" ng-disabled="adduserform.$invalid" data-ng-click="add()" class="btn btn-primary" />
</span>
<span data-ng-show="editMode">
<input type="submit" value="Update" ng-disabled="adduserform.$invalid" data-ng-click="update()" class="btn btn-primary" />
</span>
<input type="button" value="Cancel" data-ng-click="cancel()" class="btn btn-primary" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<h1>Headers List</h1>
<table class="table table-hover">
<tr>
<td><strong>User ID</strong></td>
<th>Status</th>
<th>Action</th>
</tr>
<tr data-ng-repeat="user in users">
<td>
<p>{{ user.userid }}</p>
</td>
<td>
<p>{{ user.ResultStatus }}</p>
</td>
<td>
<p>
<a data-ng-click="edit(user)" href="javascript:;">Edit</a>
</p>
</td>
</tr>
</table>
<hr />
</div>
</div>
</div>
My main page - index.html where you can find all the file imports
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title></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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script>
<link href="../css/bootstrap.css" rel="stylesheet" />
<link href="../css/bootstrap-theme.css" rel="stylesheet" />
<script src="../lib/angular.js"></script>
<script src="../lib/jquery-1.11.1.js"></script>
<script src="../lib/bootstrap.js"></script>
<script src="../app.js"></script>
<script src="../Controller/HeaderCtrl.js"></script>
<script src="Scripts/jquery-ui-1.10.4.js"></script>
<link href="../css/index.css" rel="stylesheet" />
<script src="../lib/datepicker.js"></script>
</head>
<body ng-controller="headerCtrl">
<div class="navbar navbar-inverse navbar-fixed-left">
<p>
<br />
</p>
<b><a class="navbar-brand" href="#" style="color:white">Administrator</a></b>
<ul class="nav navbar-nav">
<li>Header Details</li>
<li>Project ID Creation</li>
<li>Report Details</li>
<li>Display all submission for verify</li>
</ul>
<b><a class="navbar-brand" href="#" style="color:white">User</a></b>
<ul class="nav navbar-nav">
<li>Timesheet Information</li>
</ul>
</div>
<div class="navbar navbar-inverse navbar-fixed-top">
<ul id="login_signup">
<li>Login <span>◀</span></li>
<li>SignUp <span>◀</span></li>
</ul>
</div>
<div class="page-content">
<div ng-view>
</div>
</div>
</body>
</html>
code snippet from index.css
.ui-datepicker-calendar {
display: none;
}

Modal does opens but does not close?

I am having Issues with the modal, it opens on loading and does not respond to clicks to close it. Not sure what the Issue is. Attached is the code I have. How do I make the modal open as I click the button and close when I click the x
<html lang="en">
<head>
<meta chart="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewort" content="width=device-width, intial-scal=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/bootstrap.min.js"></script>
<title>Bootstrap</title>
</head>
<body>
<!-- signup button -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#signupform">
Signup
</button>
<!-- log in button
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#loginform">Login</button> -->
<!-- popup signup form-->
<div class="modal-fade" id="signupform">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>
×
</span>
</button>
<h4 class="modal-title"> Sign Up</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
First Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Last Name:
</label>
<div class="col-md-5">
<input type="text" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Email:
</label>
<div class="col-md-5">
<input type="email" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<label class="col-md-4 col-md-offset-1">
Confirm Password:
</label>
<div class="col-md-5">
<input type="password" class="form-control input-sm">
</div>
</div>
<div class="form-group">
<div class="col-md-2 col-md-offset-8">
<input type="submit" class="btn btn-success" value="submit">
</div>
</div>
</form>
</div>
<div class="modal-footer"></div>
</div>
</div>
</div>
<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
ref: getbootstrap.com/javascript/#modals