Skip to content

K
kalendar-unesa
Commit 6cad3ea8 by f3brysan
Options

build: #13: Tampilan kalender dengan data dummy

parent 18b769ed
Showing with 119 additions and 92 deletions
app/Http/Controllers/User/AgendaController.php
......@@ -5,6 +5,7 @@
use App\Http\Controllers\Controller;
use App\Models\Agenda;
use App\Models\Kategori;
use App\Models\UserAgenda;
use Exception;
use Illuminate\Console\View\Components\Alert;
use Illuminate\Http\Request;
......@@ -14,11 +15,17 @@
class AgendaController extends Controller
{
public function index()
public function index(Request $request)
{
$data = Agenda::with(['rPegawai', 'rKategori', 'rAttachment'])
->with()
if($request->ajax())
{
$data = UserAgenda::whereDate('start', '>=', $request->start)
->whereDate('end', '<=', $request->end)
->get(['id', 'title', 'start', 'end']);
return response()->json($data);
}
// $data = UserAgenda::all();
// return $data;
return view('user.index');
}
......
app/Models/UserAgenda.php
......@@ -14,15 +14,8 @@ class UserAgenda extends Model
protected $keyType = 'string';
protected $table = 'tr_agenda_pegawai';
protected $fillable = [
'id',
'idpegawai',
'idagenda',
'statuskehadiran',
'created_at',
'updated_at',
'deleted_at',
'idattachmenet'
protected $guarded = [
'id'
];
// public function rPegawai()
......
database/seeders/DatabaseSeeder.php
......@@ -3,8 +3,9 @@
namespace Database\Seeders;
// use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use App\Models\UserAgenda;
use Faker\Factory;
use App\Models\Users;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Hash;
......@@ -21,14 +22,22 @@ public function run()
// \App\Models\User::factory(10)->create();
$faker = Factory::create();
// generate data by calling methods
for($i = 1; $i <= 10; $i++){
for($i = 1; $i <= 10; $i++) {
// random waktu
$start_date = $faker->dateTimeBetween('+0 days', '+1 month');
$start_date_clone = clone $start_date;
$hours = rand(1,6);
$end_date = $faker->dateTimeBetween($start_date, $start_date_clone->modify('+'.$hours.' hours'));
// insert data ke table pegawai menggunakan Faker
Users::create([
'nama' => $faker->name,
'email' => $faker->email,
'password' => Hash::make('password')
]);
}
UserAgenda::create([
'idpegawai' => '40a1618d-e46a-4b7f-a730-cfee894c69d2',
'idagenda' => '6a0304c4-5635-4d0d-8371-d5c89b7d41ff',
'nama_agenda' => $faker->sentence,
'start' => $start_date,
'end' => $end_date
]);
}
}
}
resources/views/User/index.blade.php
......@@ -12,82 +12,29 @@
<div class="col-12">
<div class="breadcrumb-wrapper col-12">
<ol class="breadcrumb p-0 mb-0">
<li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}"><i class="bx bx-home-alt"></i></a></li>
<li class="breadcrumb-item"><a href="#">Agenda</a></li>
<li class="breadcrumb-item"><a href="{{ route('user.dashboard') }}"><i
class="bx bx-home-alt"></i></a></li>
<li class="breadcrumb-item"><a href="#">Agenda</a></li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-body">
<div class="pb-1">
<a class="btn btn-primary btn-sm" id="tambah-agenda" href="{{ route('user.tambah-agenda') }}">Tambah Agenda</a>
</div>
<a class="btn btn-primary btn-sm" id="tambah-agenda" href="{{ route('user.tambah-agenda') }}">Tambah
Agenda</a>
</div>
<!-- Basic Tables start -->
<div class="row" id="basic-table">
<div class="col-12">
<div class="card">
<div class="card">
<div class="card-content">
<div class="card-body">
<!-- Table with outer spacing -->
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Nama Agenda</th>
<th>Tanggal</th>
<th>Pukul</th>
<th>Tempat</th>
<th>LOCATION</th>
<th>ACTION</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-bold-500">Michael Right</td>
<td>$15/hr</td>
<td class="text-bold-500">UI/UX</td>
<td>Remote</td>
<td>Austin,Taxes</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
<tr>
<td class="text-bold-500">Morgan Vanblum</td>
<td>$13/hr</td>
<td class="text-bold-500">Graphic concepts</td>
<td>Remote</td>
<td>Shangai,China</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
<tr>
<td class="text-bold-500">Tiffani Blogz</td>
<td>$15/hr</td>
<td class="text-bold-500">Animation</td>
<td>Remote</td>
<td>Austin,Texas</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
<tr>
<td class="text-bold-500">Ashley Boul</td>
<td>$15/hr</td>
<td class="text-bold-500">Animation</td>
<td>Remote</td>
<td>Austin,Texas</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
<tr>
<td class="text-bold-500">Mikkey Mice</td>
<td>$15/hr</td>
<td class="text-bold-500">Animation</td>
<td>Remote</td>
<td>Austin,Texas</td>
<td><a href="#"><i class="badge-circle badge-circle-light-secondary bx bx-envelope font-medium-1"></i></a></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="card-body">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
......@@ -96,4 +43,73 @@
</div>
</div>
</div>
@endsection
\ No newline at end of file
<div id="calendarModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span> <span
class="sr-only">close</span></button>
<h4 id="modalTitle" class="modal-title"></h4>
</div>
<div id="modalBody" class="modal-body"> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
@endsection
@push('custom-js')
<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'>
<link href='https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css' rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
<script>
$(document).ready(function() {
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var calendar = $('#calendar').fullCalendar({
timeZone: 'Asia/Jakarta',
// editable: true,
eventColor: '#378006',
eventTextColor: '#ffffff',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
events: '/agenda',
timeFormat: 'H(:mm)', // uppercase H for 24-hour clock
selectable: true,
// selectHelper: true,
select: function(start, end, allDay) {
// var title = prompt('Event Title:');
},
eventClick: function(event, jsEvent, view) {
$('#modalTitle').html(event.title);
$('#modalBody').html(event.description);
$('#eventUrl').attr('href', event.url);
$('#calendarModal').modal();
},
eventDidMount: function(info) {
var tooltip = new Tooltip(info.el, {
title: info.event.extendedProps.description,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
});
});
</script>
@endpush
resources/views/layouts/main.blade.php
......@@ -26,10 +26,10 @@
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="/app-assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/colors.css">
{{-- <link rel="stylesheet" type="text/css" href="/app-assets/css/colors.css"> --}}
<link rel="stylesheet" type="text/css" href="/app-assets/css/components.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/themes/dark-layout.css">
<link rel="stylesheet" type="text/css" href="/app-assets/css/themes/semi-dark-layout.css">
{{-- <link rel="stylesheet" type="text/css" href="/app-assets/css/themes/dark-layout.css"> --}}
{{-- <link rel="stylesheet" type="text/css" href="/app-assets/css/themes/semi-dark-layout.css"> --}}
<!-- END: Theme CSS-->
<!-- BEGIN: Page CSS-->
......@@ -46,6 +46,9 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">
<!-- END: Sweet Alert-->
{{-- FULL CALENDAR --}}
</head>
<!-- END: Head-->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment