{% extends "layout/layout-docs.html" %} {% set page_title = "Plugin" %} {% block content %}
{% include "../templates/layout/header-footer/doc-appheader.html" %} {% include "../templates/layout/header-footer/doc-sidebar.html" %} {% include "../templates/layout/header-footer/doc-topnav.html" %}
{% include "../templates/components/breadcrumbs/doc-brd.html" %}

## 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 )

<div id="world-map" class=" rt-mb-48"></div> <script> //map $('#world-map').vectorMap({ map: 'world_mill_en', normalizeFunction: 'polynomial', hoverOpacity: 0.7, hoverColor: false, regionStyle: { initial: { fill: '#B6BFF3' }, hover: { fill: '#4452FF', 'fill-opacity': 1 }, }, backgroundColor: 'transparent', }); </script>

## 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

##### Event

Event Name
Please provide a valid event name
Category
Please select a valid event category
<div class="row"> <div class="col-12"> <div class="row"> <div class="col-lg-3"> <div class="card"> <div class="card-body"> <div id="btn-new-event" class="btn waves-effect waves-light btn-primary btn-icon d-block "> <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> <!-- end col--> <div class="col-lg-9"> <div class="card"> <div class="card-body"> <div id="calendar"></div> </div> </div> </div> <!-- end col --> </div> <!-- Add New Event MODAL --> <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> <!-- end modal-content--> </div> <!-- end modal dialog--> </div> <!-- end modal--> </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

<div id="dount_chart"></div> <script> // pie chart home page var donut_options = { series: [90, 50, 200], chart: { width: 220, type: 'donut', }, colors: ['#FF9500', '#E84646', '#0E5FD9', ], dataLabels: { enabled: false, }, responsive: [{ breakpoint: 480, options: { chart: { width: 220, }, legend: { show: false } } }], legend: { show: false } }; var dountChart = new ApexCharts(document.querySelector("#dount_chart"), donut_options); dountChart.render(); </script>
{% include "../templates/layout/header-footer/footer.html" %}
{% endblock %}