Raple - Admin Dashboard

Map

Relick uses jVectorMap - a free and open-source modern map library that helps developers to create beautiful and interactive visualizations for web pages.

Usage

to able to use jvector you have to link css and js files ( jquery-jvectormap-2.0.5.css, jquery-jvectormap-2.0.5.min.js, jquery-jvectormap-world-mill-en.js )

+

−

Calendar

Relick uses javascript FullCalendar - a free and open-source modern calendar library that helps developers to create beautiful and interactive visualizations for web pages.

Usage

before you implement Full calendar you have to link those files that are mentioned below. all of those files you will get from assets/css & assets/js

Create New Event

Drag and drop your event or click in the calenda

New Event Planning

Meeting

Generating Reports

Create New theme

1	2	3	4	5	6	7
12a All Day Event	10:30a Meeting	7p Birthday Party			4p Repeating Event
12a All Day Event	12p Lunch	7p Birthday Party			4p Repeating Event

8	9	10	11	12	13	14

15	16	17	18	19	20	21

22	23	24	25	26	27	28
						12a Click for Google

1	2	3	4	5	6	7

8	9	10	11	12	13	14

<div class="button-content-wrapper">
                            <div class="button-icon">
                                <i class="ph-plus-circle"></i>
                            </div> 
                            <div class="button-text">
                                Create New Event
                            </div>
                        </div>
                    </div>
                    <div class=" body-font-4 text-gray-600 rt-pt-30 rt-mb-20">Drag and drop your event or click in the calenda</div>
                    <div id="external-events">
                    <div class="external-event fc-event bg-success" data-class="bg-success">
                        <i class="mdi mdi-checkbox-blank-circle f-size-11 me-2"></i>New Event Planning
                    </div>
                    <div class="external-event fc-event bg-info" data-class="bg-info">
                        <i class="mdi mdi-checkbox-blank-circle f-size-11 me-2"></i>Meeting
                    </div>
                    <div class="external-event fc-event bg-warning" data-class="bg-warning">
                        <i class="mdi mdi-checkbox-blank-circle f-size-11 me-2"></i>Generating Reports
                    </div>
                    <div class="external-event fc-event bg-danger" data-class="bg-danger">
                        <i class="mdi mdi-checkbox-blank-circle f-size-11 me-2"></i>Create New theme
                    </div>
                    </div>
                
                </div>
            </div>
        </div> 
            <div class="col-lg-9">
            <div class="card">
                <div class="card-body">
                    <div id="calendar"></div>
                </div>
            </div>
        </div> 
            
        </div> 
        
        
        <div class="modal fade" id="event-modal" tabindex="-1">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header py-3 px-4">
                        <h5 class="modal-title">Event</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                    <div class="modal-body p-4">
                        <form class="needs-validation" name="event-form" id="form-event" novalidate>
                            <div class="row">
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Event Name</label>
                                        <input class="form-control" placeholder="Insert Event Name"
                                            type="text" name="title" id="event-title" required value="" />
                                        <div class="invalid-feedback">Please provide a valid event name</div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="mb-3">
                                        <label class="form-label">Category</label>
                                        <select class="form-select" name="category"
                                            id="event-category">
                                            <option selected> --Select-- </option>
                                            <option value="bg-danger">Danger</option>
                                            <option value="bg-success">Success</option>
                                            <option value="bg-primary">Primary</option>
                                            <option value="bg-info">Info</option>
                                            <option value="bg-dark">Dark</option>
                                            <option value="bg-warning">Warning</option>
                                        </select>
                                        <div class="invalid-feedback">Please select a valid event category</div>
                                    </div>
                                </div>
                            </div>
                            <div class="row mt-2">
                                <div class="col-6">
                                    <button type="button" class="btn waves-effect waves-light  btn-danger" id="btn-delete-event">Delete</button>
                                </div>
                                <div class="col-6 text-end">
                                    <button type="button" class="btn waves-effect waves-light  btn-light me-1" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn waves-effect waves-light  btn-success" id="btn-save-event">Save</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div> 
            </div> 
        </div>
        
    </div>
    </div>

Chart

Relick Uses Javascript Apexchart - A Free And Open-Source Modern Calendar Library That Helps Developers To Create Beautiful And Interactive Visualizations For Web Pages. you have to need to files once css & js . All src files you get from assets/css & assets/js

Map

Usage

Calendar

Usage

February 2026

Event

Chart

Faraz Ahmed