I am trying to implement FullCalendar in Laravel. In this regard my controller is like below
<?php
namespace App\Http\Controllers;
use Illuminate\Routing\Controller as BaseController;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Calendar;
use App\Event;
class HomeController extends BaseController
{
public function calendar() {
$events = [];
$data = Event::all();
if($data->count()) {
foreach ($data as $key => $value) {
$events[] = Calendar::event(
$value->title,
true,
new \DateTime($value->start_date),
new \DateTime($value->end_date.' +1 day'),
null,
// Add color and link on event
[
'color' => '#f05050',
'url' => 'pass here url and any route',
]
);
}
}
$calendar = Calendar::addEvents($events);
return view('welcome', compact('calendar'));
}
}
My View file is like below
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="{{ asset('/css/main.css')}}" />
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.2.0/main.min.js" crossorigin="anonymous"></script>
<style>
body {
margin: 40px 10px;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">MY Calender</div>
<div class="panel-body">
{!! $calendar->calendar() !!}
{!! $calendar->script() !!}
</div>
</div>
</div>
</body>
</html>
My output is like below (I am getting blank white screen)
I found that I have to initialize FullCalendar. How can I initialize FullCalender ?
I am trying to follow below tutorials. But I didn't find any initialization there.
https://www.laravelcode.com/post/laravel-full-calendar-tutorial-example-using-maddhatter-laravel-fullcalendar
https://github.com/acaronlex/laravel-calendar
https://github.com/maddhatter/laravel-fullcalendar
https://hdtuto.com/article/laravel-full-calendar-tutorial-example-from-scratch
I am confused. What should I do ?
It looks like you are calling {!! $calendar->script() !!} outside of a script tag.
Try <script> {!! $calendar->script() !!} </script> instead
The example shows that within a script tag, which suggests it likely loads javascript assets involved in rendering the calendar.
Related
I am using barryvdh/laravel-dompdf to generate pdf.
I'm trying generate one pdf file with multiple pages from data collection the problem is that I get only first element and one page. Using foreach loop to generate pages. Also I was trying to use foreach in my blade, but then I get only the last page.
Controller:
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$html = '';
foreach($kuponai as $kuponas)
{
$view = view('pdf.multiple')->with(compact('kuponas'));
$html .= $view->render();
}
$pdf = PDF::loadHTML($html);
$sheet = $pdf->setPaper('a4', 'landscape');
return $sheet->stream('sugeneruoti.pdf');
}
Maybe problem in my blade file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dovanų kuponas</title>
</head>
<body>
<div class="coupon">
<div class="page">
<div class="subpage">
<div class="container" style="
width: 21cm;
height: 16cm;
position: absolute;
top: 6.8cm;
font-family: DejaVu Sans;
background: white;
">
<h2>{{!! $kuponas->kupono_nr !!}}</h2>
<h3 style="margin-left: 3.2cm">
Dovanų kupono numeris:
<span style="color: black"></span>
</h3>
</div>
</div>
</div>
</div>
</body>
</html>
<style>
#page {
size: A4;
margin: 0;
}
#media print {
.page {
margin: 0;
border: initial;
border-radius: initial;
width: initial;
min-height: initial;
box-shadow: initial;
background: initial;
page-break-after: always;
}
}
</style>
There are certain things that are wrong in the code snippet you have provided, I will explain those first then provide correct way of doing it(for which I get results).
Firstly
you have used with & compact together, I don't know if it gets correct results but you should use any one of them or use array syntax of view method.
Secondly
what you are doing it you are rendering the view to html & then concating it, so , your html would look like,
<html>
.... content
</html>
<html>
.... content
</html>
& so on.
Thirdly
You css is messed up & not working as you want because of inline css you have added.
Solution
I would have used View Components to create similar views with different data.
So we would create a component in resources/views/components/single.blade.php (here I have named it single).
I have added your repeative code in the component single from your view. Now your coupon div class is in the component single.
<div class="coupon">
<div class="page">
<div class="subpage">
<div>
<h2>{{ $kuponas->kupono_nr }}</h2>
<h3>
Dovanų kupono numeris:
<span></span>
</h3>
</div>
</div>
</div>
</div>
Then in your view,
<!DOCTYPE html>
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<head>
<title>Dovanų kuponas</title>
<style>
.page-break {
page-break-after: always;
}
</style>
</head>
<body>
#php $count = 0;#endphp
#foreach ($kuponai as $kuponas)
#php $count++ #endphp
<div class="container {{ (count($kuponai)-1 >= $count) ? 'page-break' : '' }}">
#component('pdf.components.single', ['kuponas' => $kuponas])
#endcomponent
</div>
#endforeach
</body>
</html>
use page-break class to create breaks, I have used count condition to remove one extra page break. I am passing the data of kuponas to the component.
Finally change your controller,
public function multiplePagesPdf(Request $request)
{
$kuponai = Kuponas::all();
//dd($kuponas);
$view = view('pdf.multiple', ['kuponai' => $kuponai]);
$html = $view->render();
$pdf = PDF::loadHTML($html)->setPaper('a4', 'landscape');
return $pdf->stream('sugeneruoti.pdf');
}
laaravel version:8.0
livewire version: 2.x
Hi there
I am new to laravel livewire and facing a strange issue!. in order to execute the action i used wire:click as can be seen in the following code in my admin-login.blade.php
#section('content')
<div class="admin-login display-flex flex-align-items-center flex-justify-content-center">
<button wire:click="toDo">{{$login}}</button>
<div class="admin-form display-flex flex-direction-column flex-justify-content-center" >
#livewire('header',['name'=> 'Admin Login','width'=> '100%','height' => '20%'])
<form class=" display-flex flex-direction-column flex-justify-content-center" >
<section style="margin: 2%;">
<label for="Email">Email :<span style="color: red">*</span></label>
<input type="email" required>
</section>
<section style="margin: 2%;">
<label for="Password">Password :<span style="color: red">*</span></label>
<input type="password" required>
</section>
<button style="width: 40%; height: 5vh; align-self: center;justify-self: flex-end;">Login</button>
</form>
</div>
</div>
#endsection
my app.blade.php file in layouts directory is
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{{asset('css/admin/app.css')}}">
#livewireStyles
<title>Admin Dashboard</title>
</head>
<body>
#livewire('nav-bar')
#livewire('side-bar')
#yield('content')
</body>
#livewireScripts
<script>
var isStudentDropDown = false
Livewire.on('showSidebar',()=>{
document.getElementById('sidebar').style.display = "block"
})
Livewire.on('closeSidebar',()=> {
document.getElementById('sidebar').style.display = "none"
})
Livewire.on('showDropdown',data => {
if(document.getElementById(data).style.display === "block"){
document.getElementById(data).style.display = "none"
}else{
document.getElementById(data).style.display = "block"
}
})
</script>
</html>
now my component php file
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class AdminLogin extends Component
{
public $login = "login";
public function render()
{
return view('livewire.admin-login');
}
public function hell(){
$this->login = "signup";
}
public function toDo(){
dd('do some thing');
}
}
i have checked my devtools and got no request being send to the server
Pardon me for any mistake!
Extends layouts from component
ref link https://laravel-livewire.com/docs/2.x/rendering-components#custom-layout
public function render()
{
return view('livewire.admin-login')
->extends('layouts.app')
->section('content');
}
and remove #section from admin-login.blade.php
I am using setParent() to show a particular folder only in Google picker but searching lists all the files and folders. I want search results restricted to parent folder.
Is this possible?
As far as I can tell there is no way to do this with the picker API. One hack is to filter for starred files but that is usually not helpful because you probably just want to set one directory/folder to search inside.
In the end I had to use the Google Drive API instead and create my own interface
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet" />
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js" integrity="sha512-RNLkV3d+aLtfcpEyFG8jRbnWHxUqVZozacROI4J2F1sTaDqo1dPQYs01OMi1t1w9Y2FdbSCDSQ2ZVdAC8bzgAg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body style="background-color: rgb(221, 238, 232);">
<div style="max-width: 1100px; margin: auto;" class="conainer mt-5">
<div class="row text-center mt-5">
<div class="col-10 ms-5">
<div class="d-flex">
<input type="search" class="form-control me-2" id="search_input" oninput="search(event)" placeholder="Search" aria-label="Search">
<button type="button" class="btn btn-primary" oninput="search(event)">
<i class="fas fa-search"></i>
</button>
</div>
</div>
<div class="row text-center mt-5 ">
<div class="col-10 ms-5" style="background-color: white; border-radius: 5px;">
<template type="text/x-handlebars-template" id="documentsTemplate">
<div class="row mt-2 mb-2">
{{#if documents.length}}
{{#each documents}}
<div class="col-2 mt-2">
<div style="height: 200px; width:150px; background-color: white; border-radius: 5px; border: solid 1px; border-color: lightblue;">
<img style="height: 150px; width:150px;" src="{{thumbnailLink}}" />
<input class="form-check-input" type="checkbox" value="">
{{name}}
</div>
</div>
{{/each}}
{{else}}
<div style="height: 200px; width:100%; background-color: white; text-align: center; font-size: 2vw; margin: 0 auto;">
No Results
</div>
{{/if}}
</div>
</template>
<div id="documentsList"></div>
</div>
</div>
</div>
</div>
<script type="module" src="script.js"></script>
<!-- <script src="https://apis.google.com/js/platform.js"></script> -->
<script src="https://apis.google.com/js/api.js"></script>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
//script.js
//import { google_client_id } from "./utils/configs.js"
// get this from 'APIs and Services'>credentials>Oauth app
const google_client_id=XXXXX
(function() {
// Use the API Loader script to load google.picker and gapi.auth.
function onApiLoad() {
gapi.load('auth2', onAuthApiLoad);
gapi.load('picker', onPickerApiLoad);
}
globalThis.search = (event) => {
clearTimeout(globalThis.searchTimeout);
globalThis.searchTimeout = setTimeout(() => {
getTemplateFolder()
.then(searchFiles)
}, 1000)
}
document.getElementById('search_input').addEventListener("keyup", function(event) {
// Number 13 is the "Enter" key on the keyboard
var key = event.key || event.keyCode;
if (key === 13) {
// Cancel the default action, if needed
event.preventDefault();
search(event);
}
});
gapi.load('client:auth2', (aa) => {
gapi.client.init({
client_id: google_client_id,
scope: 'https://www.googleapis.com/auth/drive',
discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/drive/v3/rest"],
})
.then(checkSession)
.then(function() {
return getTemplateFolder();
})
.then(function(folder) {
return getFiles(folder);
});
});
function checkSession() {
if (!gapi.auth2.getAuthInstance().isSignedIn.get()) {
return gapi.auth2.getAuthInstance().signIn();
}
}
function getTemplateFolder() {
return gapi.client.drive.files.list({
q: "mimeType = 'application/vnd.google-apps.folder' and name = 'XXXXXX' and trashed = false",
pageSize: 10,
fields: 'nextPageToken, files(id, name)',
}).then(function(response) {
console.log(response);
return response.result.files[0];
});
}
function getFiles(templateFolder) {
return gapi.client.drive.files.list({
q: `'${templateFolder.id}' in parents and trashed = false`,
pageSize: 10,
fields: 'nextPageToken, files(id, name, mimeType, thumbnailLink)',
}).then(function(response) {
console.log(response);
var template = Handlebars.compile(document.querySelector("#documentsTemplate").innerHTML);
document.querySelector("#documentsList").innerHTML = template({ documents: response.result.files });
return response.result.files;
});
}
function searchFiles(templateFolder) {
return gapi.client.drive.files.list({
q: `'${templateFolder.id}' in parents and fullText contains '${document.getElementById("search_input").value}' and trashed = false`,
pageSize: 10,
fields: 'nextPageToken, files(id, name, mimeType, thumbnailLink)',
}).then(function(response) {
console.log(response);
var template = Handlebars.compile(document.querySelector("#documentsTemplate").innerHTML);
document.querySelector("#documentsList").innerHTML = template({ documents: response.result.files });
return response.result.files;
});
}
})();
Make sure to add the google_client_id and the directory name you want to filter by.
I am new to AngularJS and i need your help. I have created a JSON file which consists of a list of items inside another list. I want to access the items in the second list but I don't know how. I have searched all day in the Internet but I hardly found anything useful. Please help me. Below is my code:
categoryItems.json
[
{
"$id":"1",
"name":"Business",
"cat":[
{
"cname":"CyberSecurity",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
},
{
"cname":"Google Cloud Platform for Systems Operations",
"img":"img3_2.jpg",
"cat_kurs":"6-course specialization",
"txt":"University of California"
},
{
"cname":"Data Security",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
}
]
},
{
"$id":"2",
"name":"Foreign Language",
"cat":[
{
"cname":"Data Security",
"img":"img3_1.jpg",
"cat_kurs":"7-course specialization",
"txt":"Rice University"
},
{
"cname":"Google Cloud",
"img":"img3_2.jpg",
"cat_kurs":"3-course specialization",
"txt":"University of California"
}
]
}
]
script.js
var myItemsApp = angular.module('myItemsApp', []);
myItemsApp.factory('itemsFactory', ['$http', function($http){
var itemsFactory ={
itemDetails: function() {
return $http(
{
url: "categoryItems.json",
method: "GET",
})
.then(function (response) {
return response.data;
angular.forEach(data.itemDetails, function(item) {
});
});
}
};
return itemsFactory;
}]);
myItemsApp.controller('ItemsController', ['$scope', 'itemsFactory', function($scope, itemsFactory){
var promise = itemsFactory.itemDetails();
promise.then(function (data) {
$scope.itemDetails = data;
console.log(data);
});
$scope.select = function(item) {
$scope.selected = item;
};
$scope.selected = {};
}]);
index.html
<!DOCTYPE html>
<html ng-app="myItemsApp">
<head>
<meta charset="utf-8" />
<title>Test</title>
<!-- <link data-require="bootstrap-css" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />-->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" />
<link href="css/bootstrap-theme.min.css" rel="stylesheet" media="screen"/>
<script src="js/angular.min.js"></script>
<script src="js/angular.js"></script>
<script src="script.js"></script>
<style>
span.el{
background-color:#85929E;
font-size: xx-small;
font-color: #FDFEFE;
width: 60px;
}
span.txt{
font-size:xx-small;
}
div.cat{
background-color:#F2F3F4 ;
}
</style>
</head>
<body>
<div ng-controller="ItemsController">
<div class="row">
<div class="col-md-4">
<div class="panel panel-default">
<ul class="list-group">
<a class="list-group-item" ng-click="select(item)" ng-repeat="item in itemDetails">{{item.name}}</a>
</ul>
</div>
</div>
<div class="col-md-8">
<div class="panel panel-default" style="width: 70%">
<div class="panel-heading">{{selected.name}}</div>
<div class="panel-body">
<div ng-repeat="subcat in item.cat ">
{{subcat.cname}}
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Please HELP ME.
Looks like you need todo another ng-repeat on the sub categories.
<div class="col-md-8" ng-show="selected.name.length">
<div class="panel panel-default" style="width: 70%">
<div class="panel-heading">{{selected.name}}</div>
<div class="panel-body">
<div ng-repeat="subcat in itemDetails | filter:{name:selected.name}">
<div ng-repeat="cat in subcat.cat">
{{cat.cname}}
</div>
</div>
</div>
</div>
Have a look at this example ive mocked up for you
You need to deserialize the response using angular.fromJson
more reference: https://docs.angularjs.org/api/ng/function/angular.fromJson
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<?php
foreach($css_files as $file): ?>
<link type="text/css" rel="stylesheet" href="<?php echo $file; ?>" />
<?php endforeach; ?>
<?php foreach($js_files as $file): ?>
<script src="<?php echo $file; ?>"></script>
<?php endforeach; ?>
<style type='text/css'>
body
{
font-family: Arial;
font-size: 14px;
}
a {
color: blue;
text-decoration: none;
font-size: 14px;
}
a:hover
{
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<a href='<?php echo base_url?>images_examples/example1'>Example 1 - Simple</a> |
<a href='<?php echo base_url?>images_examples/example2'>Example 2 - Ordering</a> |
<a href='<?php echo base_url?>images_examples/example3'>Example 3 - With group id</a>
</div>
<div style='height:20px;'></div>
<div>
<?php echo $output; ?>
</div>
</body>
</html>
Here i upload view file.but i can't able write controller function.i want how to install image_crud library and how to upload multiple images in database and store the image in folder.
Download the image-crud then extract the package
Place the files in the appropriate codeigniter's folder
config >> image_crud.php
controllers >> images_examples.php
libraries >> image_crud.php, image_moo.php
views >> example.php
Assets in the root of your CI folder
And in your url http://yourproject.localhost/images_examples/example1
Also import the sample database provided in the package