MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

added add new event modal

Browse Source
This commit is contained in:
victorAnumudu
2024-12-17 00:15:13 +01:00
parent e0c41d1e02
commit 263fec36c5
1 changed files with 38 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/calendar/Calendar.jsx
+38 -2
View File
@@ -20,8 +20,8 @@ export default function Calendar(){
<div className="row">
<div className="col-xl-3">
<div id="external-events">
<button className="btn btn-primary btn-block" data-toggle="modal"
data-target="#eventModal">Add New Event
<button className="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#eventModal">
Add New Event
</button>
<p className="mt-3">
Drag and drop your event or click in the calendar.
@@ -60,6 +60,42 @@ export default function Calendar(){
</div>
</div>
</div>
{/* Event Modal */}
<div className="modal fade" id="eventModal" tabIndex="-1" role="dialog">
<div className="modal-dialog modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title" id="verticalCenterTitle">Add New Event</h5>
<button type="button" className="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div className="modal-body">
<form>
<div className="form-group">
<label>Event Name</label>
<input type="email" className="form-control" id="eventname" />
</div>
<div className="form-group">
<label>Choose Event Color</label>
<select className="form-control">
<option>Primary</option>
<option>Warning</option>
<option>Success</option>
<option>Danger</option>
</select>
</div>
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
<button type="button" className="btn btn-success">Save changes</button>
</div>
</div>
</div>
</div>
</>
)
}