I'm trying to display events on fullcalendar in Laravel. My code is below.
This is the controller methods:
public function index()
{
return $this->eventsToArray(EtudiantEvent::all());
}
public function eventsToArray($events){
$eventArray = [];
foreach ($events as $event) {
$data = [
"titre" => $event->title,
"Debut" => $event->start_date,
"Fin" => $event->end_date,
"textColor" =>"white"
];
array_push($eventArray, $data);
}
return response()->json($eventArray);
}
This is the script:
document.addEventListener('DOMContentLoaded', function() {
const calendarEl = document.getElementById('calendar');
const calendar = new FullCalendar.Calendar(calendarEl, {
plugins: ['dayGrid', 'interaction'],
header : {
left : 'prevYear,prev,next,nextYear today',
center : 'title',
right : 'dayGridMonth, dayGridWeek, dayGridDay'
},
navLinks : true,
editable :true,
selectable : true,
eventLimit : true,
events : '/etudiantEvent'
});
calendar.render();
});
Related
I've been having trouble with Full Calendar. I already tried different approaches but to no avail. The json response doesn't shows up in the calendar.
View:
<div class="col-lg-12 col-md-12">
<div id="calendar">
</div>
</div>
Controller:
public function calendar(Request $request){
if($request->ajax()){
$data= Table::where('id',Auth::user()->id)
->where('DateFrom','>',$request->start)
->where('DateTo','<',$request->end)
->get();
return response()->json($data);
}
}
Route:
Route::get('/calendar', [CalendarController::class, 'calendar'])->name('calendar');
Script (mix):
$('#calendar').fullCalendar({
events: 'calendar',
eventColor: '#378006',
displayEventTime: true,
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
})
There are no errors, the data is also being fetched but the problem is the calendar can't render it. May I ask is there any problem with this? Do I need to actually create a partial view for this and then include it to another blade file?
The problem was that I was fetching a different type of date which doesn't match up with the dates from the Fullcalendar. So to show/highlight those dates I did this.
Controller:
public function calendar(Request $request){
if($request->ajax()){
$event= Table::where('id',Auth::user()->id)
->where('DateFrom','>',date('Y-m-d',$request->start)) //converts date
->where('DateTo','<',date('Y-m-d',$request->end)) //converts date
->get();
$data = [];
foreach($event as $row){
$data[] = [
'title' => $row->title,
'start' => date(DATE_ISO8601,strtotime($row->DateFrom)),
'end' => date(DATE_ISO8601,strtotime($row->DateTo))
];
}
return response()->json(collect($data));
}
return view('partials._calendar-details',compact('data'));
}
and then for my script:
$('#calendar').fullCalendar({
// events: 'calendar',
eventColor: '#378006',
displayEventTime: false,
eventSources: [
{
events: function(start, end, timezone, callback ){
$.ajax({
url: '/calendar',
type: 'GET',
data: {
// our hypothetical feed requires UNIX timestamps
start: start.unix(),
end: end.unix()
},
dataType: 'json',
success: function(res) {
var events = [];
for (var i = 0; i < res.length; i++){
console.log(res[0].title);
events.push({
title: res[0].title,
start: res[0].start,
end: res[0].end
});
}
callback(events);
},
});
},
color: 'darkblue', // an option!
textColor: 'white', // an option!
}
],
eventRender: function (event, element, view) {
if (event.allDay === 'true') {
event.allDay = true;
} else {
event.allDay = false;
}
},
selectable: true,
selectHelper: true,
})
Instructor or Customer want to join a meeting through jitsi-meet which one of admin creates before. But when someone tried to join, this ->
"local.ERROR: Undefined variable: meeting"
error showing.
I var_dump $jitsimeetings from where clause but seeing nothing in it. some one help me please.
#Model
<?php
namespace App;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class JitsiMeeting extends Model
{
protected $table = 'jitsimeetings';
protected $fillable = ['meeting_id', 'owner_id', 'user_id','meeting_title', 'start_time', 'end_time','duration', 'jitsi_url', 'course_id', 'link_by', 'type', 'agenda', 'image'];
public function user()
{
return $this->belongsTo('App\User','user_id','id');
}
public function courses()
{
return $this->belongsTo('App\Course','course_id','id');
}
}
#Controller
public function joinMeetup($meetingid){
$userid = Auth::user()->id;
$jitsimeetings = JitsiMeeting::where([
['user_id', '=', $userid],
['meeting_id', '=', $meetingid]
])->get();
return view('admin.jitsimeeting.jitsimeet', compact('jitsimeetings'));
}
#View
<?php foreach($jitsimeetings as $key => $meeting){} ?>
<div class="container-fluid">
<div id='meet'></div>
</div>
<script src='https://meet.jit.si/external_api.js'></script>
<!-- <script src='https://localhost/external_api.js'></script> -->
<script>
const domain = 'meet.jit.si';
const options = {
roomName: <?php echo $meeting->meeting_id; ?>,
width: 1250,
height: 700,
parentNode: document.querySelector('#meet'),
userInfo: {
displayName: '<?php echo $meeting->meeting_title; ?>'
},
// jwt: '<jwt_token>',
configOverwrite:{
// doNotStoreRoom: true,
// startVideoMuted: 0,
startWithVideoMuted: true,
startWithAudioMuted: true,
// liveStreamingEnabled: true
// desktopSharingFrameRate: {
// min: 5,
// max: 5
// },
enableWelcomePage: false,
prejoinPageEnabled: false,
enableSaveLogs: false,
enableNoisyMicDetection: true
// disableRemoteMute: false
},
interfaceConfigOverwrite: {
// filmStripOnly: false,
SHOW_JITSI_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
SHOW_BRAND_WATERMARK: false,
SHOW_POWERED_BY: false
// DEFAULT_REMOTE_DISPLAY_NAME: 'New User'
// TOOLBAR_BUTTONS: []
}
};
const api = new JitsiMeetExternalAPI(domain, options);
api.executeCommand('subject', '<?php echo $meeting->meeting_title; ?>');
</script>
You have closed foreach at the begining so
<!-- <script src='https://localhost/external_api.js'></script> -->
<script>
#foreach($jitsimeetings as $key => $meeting)
<div class="container-fluid">
<div id='meet'></div>
</div>
const domain = 'meet.jit.si';
const options = {
roomName:'{{$meeting->meeting_id}}' ,
width: 1250,
height: 700,
parentNode: document.querySelector('#meet'),
userInfo: {
displayName: '{{$meeting->meeting_title}}'
},
// jwt: '<jwt_token>',
configOverwrite:{
// doNotStoreRoom: true,
// startVideoMuted: 0,
startWithVideoMuted: true,
startWithAudioMuted: true,
// liveStreamingEnabled: true
// desktopSharingFrameRate: {
// min: 5,
// max: 5
// },
enableWelcomePage: false,
prejoinPageEnabled: false,
enableSaveLogs: false,
enableNoisyMicDetection: true
// disableRemoteMute: false
},
interfaceConfigOverwrite: {
// filmStripOnly: false,
SHOW_JITSI_WATERMARK: false,
SHOW_WATERMARK_FOR_GUESTS: false,
SHOW_BRAND_WATERMARK: false,
SHOW_POWERED_BY: false
// DEFAULT_REMOTE_DISPLAY_NAME: 'New User'
// TOOLBAR_BUTTONS: []
}
};
const api = new JitsiMeetExternalAPI(domain, options);
api.executeCommand('subject', '{{$meeting->meeting_title}}');
</script>
#endforeach
I tried to submit dynamic data to jscript and render the data using php from api url, but how can I pass the pagination number to the datable jscript and letting php to define the pageindex dynamically?
I tried to pass the value into the function, it will totally reload the ajax table for me and stay back at page number 1 instead of page number 2.
the api returns:
{
"data": [...],
"pageindex": 1,
"totalrecord": 708,
"totalpage": 71
}
My Form jquery:
$('.form-filter form').on('submit', function(e) {
e.preventDefault();
const start = $('.form-filter [name=start]').val();
const end = $('.form-filter [name=end]').val();
const type = $('.form-filter [name=type]').val();
const status = $('.form-filter [name=status]').val();
if (this.checkValidity() !== false) {
action_handle('fire_search');
var datetime = timezone(start, end);
paymentTable(datetime[0], datetime[1], type, status);
}
});
The datatable jscript:
function paymentTable(from, to, type, status) {
const paymentTable = $('#table').DataTable({
ajax: {
type : "POST",
url: "/api/somethinng/history",
data: {"start": from, "end": to, "type": type, "status": status},
dataSrc: function(json) {
if(json == "no data") {
return [];
} else {
return json.data;
}
}
},
responsive: {
details: {
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
tableClass: 'ui display nowrap table-sm table-bordered'
})
}
},
processing: true,
serverSide: true,
deferRender: true,
destroy: true,
order: [[0,"desc"]],
}
});
paymentTable.draw();
}
My PHP function to get the data from api:
public function api_history() {
$raw = $this->balance_model->data_source([
'type' => 1,
'status' => 1,
'fromdate' => '2020-10-01',
'todate'=> '2020-10-05',
'pageindex' => 1,
'rowperpage' => 1000
]);
if( $raw['code'] == 1 && $raw['data'] != [] ):
asort($raw['data']);
$data = [];
foreach( $raw['data'] as $ph ):
$row = [];
$row[] = $ph['date'];
$row[] = $ph['id'];
$row[] = $ph['amount'];
$data[] = $row;
endforeach;
echo json_encode([
'data' => $data
'draw' => (int)$_POST['draw'],
'recordsTotal' => $raw['totalRecord'],
'recordsFiltered' => $raw['totalRecord']
]);
else:
echo json_encode(['no data']);
endif;
}
I create an edit page to edit the data. After the user edits the form. The form should be saved. But in my case I can't save the form it's showing error.
I facing this error.
ReminderComponent.vue
<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import MarkdownIt from 'markdown-it'
import ClassicEditor from '#ckeditor/ckeditor5-build-classic';
var msg_editor;
Vue.use(VueAxios, axios);
const md = new MarkdownIt({
linkify: true
})
export default {
props: ['email_creation_link', 'email_index_route', 'email_edit_route','conditions','modules','mailtemplates'],
components: {
},
data() {
return {
template:
{
subject: '',
message: '' ,
days: '',
condition_id: 1,
},
options:[
{
display:'Client Name',
actual:'Client name'
},
{
display:'Joined Date',
actual:'Joined date'
},
{
display:'Module Name',
actual:'Module name'
},
{
display:'Last Seen',
actual:'Last seen'
},
],
showName: false,
}
},
mounted(){
var self = this;
ClassicEditor
.create(document.querySelector( "#msg"),
{
})
.then(editor => {
msg_editor = editor;
editor.model.document.on( 'change:data', () => {
self.template.message = msg_editor.getData();
});
})
.catch(error => {
console.error(error);
})
if (this.mailtemplates) {
this.template=this.mailtemplates;
}
},
methods: {
//Drag items
dragstart: function(item, e){
this.draggingItem = item;
e.dataTransfer.setData('text/plain', item.actual);
},
dragend: function(item,e) {
e.target.style.opacity = 1;
},
dragenter: function(item, e) {
this.draggingItem = item;
},
//content
replaceVariables(input)
{
let updated = input
return updated
},
//hidecontent
showHide: function(e)
{
console.log("Show "+e.target.value+ " fields")
this.showName = e.target.value !== ''
},
fetch()
{
//request data
axios.get(this.email_index_route,this.template)
.then((res) => {
this.template = res.data.template;
})
**axios.get(this.email_edit_route,this.mailtemplates)
.then((res) => {
this.mailtemplates = res.data.template;
})**
},
save()
{
//save data to db
axios.post(this.email_index_route, this.template)
.then((res) => {
alert('Mail sent successfull!')
})
**axios.post(this.email_edit_route, this.mailtemplates)
.then((res) => {
alert('Mail sent successfull!')
})**
},
addToMail: function(type, text)
{
if (type == 'message') {
this.template.message += text;
msg_editor.setData(this.template.message);
}
},
//user name replace
replaceVariables() {
return this.replaceVariables(this.options || '')
},
}
}
</script>
I think this area causing problem but i can't find the solution.
axios.get(this.email_edit_route,this.mailtemplates)
.then((res) => {
this.mailtemplates = res.data.template;
})
axios.post(this.email_edit_route, this.mailtemplates)
.then((res) => {
alert('Mail sent successfull!')
})
route file
Route::get('api/email/create', ['as' => 'email.create', 'uses' => 'Havence\AutoMailController#create']);
Route::get('automail/mail', 'Havence\AutoMailController#mail');
Route::get('automail/index',['as'=>'email.index','uses' => 'Havence\AutoMailController#index']);
Route::post('automail/edit/{id}',['as'=>'email.edit','uses' => 'Havence\AutoMailController#edit']);
Route::get('automail/delete',['as'=>'email.delete','uses' => 'Havence\AutoMailController#destroy']);
I kept searching for this but couldn't find an answer that will make this clear.
Thanks!
As per your error and your route file you are using POST method on your edit page but your edit method accepts only GET method that is why you are getting this error.
I'm getting this error
I want to display data from the MySQL table that is processed with PHP and react native but does not provide a response and does not display any error messages. If the PHP script I run with my browser will appear as follows:
[
{"group":"1","name":"Soy Souce A"},
{"group":"2","name":"Soy Souce B"},
{"group":"3","name":"Chili Tomato Souce"},
{"group":"4","name":"Vinegar"},
{"group":"5","name":"Syrup"}
]
This is the screen capture display:
My question :
Why the data can not be displayed
As in screen capture, why 3 headers can appear, header 2 is for navigation, how to eliminate headers 1 and 3
please help me overcome it, thank you
This is the react native script
import React, { Component } from 'react';
import DatePicker from 'react-native-datepicker'
import { View, Text, TouchableOpacity, FlatList } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack'
import { createAppContainer } from 'react-navigation'
import Icon from 'react-native-vector-icons/MaterialIcons';
import { Item, } from 'native-base';
class DataSearch extends React.Component {
constructor(props){
super(props)
this.state = {
date:"",
isLoading: false
}
}
componentDidMount() {
var that = this;
var date = new Date().getDate();
var month = new Date().getMonth() + 1;
var year = new Date().getFullYear();
that.setState({
date: date + '-' + month + '-' + year,
});
}
DataShowProcess = () =>{
const { date } = this.state ;
this.setState({
dataSource: [],
isLoading: true
});
fetch('https://example.com/item_group.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
dateSearch: date,
})
})
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
});
this.props.navigation.navigate('Second', this.state.dataSource);
})
.catch((error) => {
console.error(error);
});
}
render(){
return (
<View>
<DatePicker
style={{width: 200}}
date={this.state.date}
mode="date"
placeholder="select date"
format="DD-MM-YYYY"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
dateIcon: {
position: 'absolute',
left: 200,
top: 0,
marginLeft: 0
},
dateInput: {
marginLeft: 100
},
}}
onDateChange={(date) => {this.setState({date: date})}}
/>
<TouchableOpacity
style={{ alignItems: 'center'}}
onPress={this.DataShowProcess}
>
<Icon name='search' size={35} color='black'/>
</TouchableOpacity>
</View>
)
}
}
class DataShow extends React.Component {
render(){
const { navigation } = this.props;
return (
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.responseJson}
renderItem={({item}) => <Text>{item.group}, {item.name}</Text>}
keyExtractor={({id}, index) => id}
/>
</View>
)};
}
const RootStack = createStackNavigator({
First: DataSearch,
Second: DataShow,
});
export default createAppContainer(RootStack);