I am using fullcalendar 5 and have created a custom view according to the documentaion
In may calendar configuration I have added this eventClick: (info) => this.displayDetail(info) it work great with the default views but can't figure out how to trigger the eventClick from my customview
How could I trigger it.
Customview configuration:
import { sliceEvents, createPlugin } from '#fullcalendar/core'
const CustomViewConfig = {
classNames: ['list-view'],
duration: {
month: 1.5
},
buttonText: 'Planning',
content (props, element) {
let html = '<div class="row">'
const events = sliceEvents(props, false)
for (const event of events) {
html += `
<div class="col-12 col-md-6 event color-${event.def.sourceId}">
<div class="row mb-4">
<div class="col-4">
<div class="col-date">
<span>${event.range.start.getDate()} ${event.range.start.toLocaleString('default', { month: 'long' })}</span>
<span>${event.range.end.getDate()} ${event.range.end.toLocaleString('default', { month: 'long' })}</span>
</div>
</div>
<div class="col-8">
<div class="col-content">
${event.def.title}
</div>
</div>
</div>
</div>
`
}
html += '</div>'
return { html: html }
}
}
export default createPlugin({
views: {
custom: CustomViewConfig
}
});
Related
I'm trying to add a Collapsible in my project. The functionality works simply. But there is a CSS issue in collapsible. When I click on a header the collapsible panel opens on after all the header. I want to open the collapsible panel next to each header. I'm using react-collapsible package.
Here is my code,
return (
assignTasklist && assignTasklist.map((assign) =>
<div className="dashboard-tasklists-group_header">
<div id={assign.TaskType} className={ "dashboard-tasklists-group_header-left"} onClick={()=> {
// e.preventDefault();
// e.stopPropagation();
this.onToggleAccordion(assign.TaskType)}}>
{assign.Description}
</div>
<div className="dashboard-tasklists-group_header-right">
<button className="dashboard-tasklists-group_header-caret-button" onClick={()=> {
// e.preventDefault();
// e.stopPropagation();
this.onToggleAccordion(assign.TaskType)}}>
<CaretIcon />
</button>
</div>
</div>
)
);
}
render() {
const { assignDetails } = this.props;
return <div className="dashboard-tasklists-group">
<Collapsible trigger={this.groupWorkingHeader()} /* handleTriggerClick={() => {
}}open={this.state.testflag} */ >
{assignDetails && assignDetails.length>0 && <div className="dashboard-index_announcements-wrapperWP" style={{cursor:'pointer'}}>
<div /* className="dashboard-index_announcements" */ style={{maxHeight: '240px',overflowY: "scroll"}}>
{assignDetails.map(patient =>
<div onClick={()=> { browserHistory.push(`/patientsTask/${patient.PatientID}`); }} className="showingdet"><span style={{fontWeight:700}}>{patient.PatientID}</span>-{patient.Name}</div>
)}
</div>
</div>}
</Collapsible>
</div>;
}
Please help me to solve
i can not filtred MyJson Data "InstallationsDefaultTypes" have you an idea please. How i can filter mythe nested JSON
i just using ng-class to filter it's possible?
Angular Controller :
$scope.GetDefaultByInstallation = function ()
{
$scope.installationsStates = [];
Object.keys($scope.installationsHelper).forEach(function (key)
{
var res = false;
angular.forEach($scope.installationsHelper[key].InstallationsDefautsTypes, function (value, key)
{
if (value.value == true)
{
res = true;
}
});
$scope.installationsStates.push({
name: $scope.installationsHelper[key].InstallationsDefautsTypes.name,
state: res
});
});
}
page.chtml : this is my page html
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 stateDefaut">
<div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 ">
<div ng-repeat="value in installationsHelper" class="col-lg-6 col-md-6 col-sm-6 col-xs-6 text-left">
<span ng-class="{value.InstallationsDefautsTypes.value | filter : value.InstallationsDefautsTypes.name = "Delestage" ? 'mDefault' : 'mActive'}">
OUI
</span>
</div>
</div>
</div>
JSON:
scope.installationsStates = [ {
Installations: {
id: 1
},
InstallationsDefautsTypes :
{
Delestage:
{
name: "Delestage",
value : false,
id: 1
}
defaut command:
{
name: "defaut1",
value : false,
id: 1
}
}
defaultsInstallations: {
0: "defaut",
1:Delestage
}
}]
As per my understanding I made following example as per assumptions
<html ng-app="myApp">
<head>
<title></title>
</head>
<body>
<div ng-controller="myController">
<div ng-repeat="value in installationsStates">
<span style="color: {{ value.InstallationsDefautsTypes.value ? 'red' : 'black' }};">
OUI
</span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('myController', function($scope) {
$scope.installationsStates = [
{
Installations: {
id: 1
},
InstallationsDefautsTypes : {
name: "Delestage",
value : false,
id: 1
},
defaultsInstallations: {
0:"defaut",
1:"Delestage"
}
},
{
Installations: {
id: 2
},
InstallationsDefautsTypes : {
name: "Delestage",
value : true,
id: 2
},
defaultsInstallations: {
0:"defaut",
1:"Delestage"
}
},
{
Installations: {
id: 3
},
InstallationsDefautsTypes : {
name: "Delestage",
value : false,
id: 3
},
defaultsInstallations: {
0:"defaut",
1:"Delestage"
}
},
];
});
</script>
</body>
</html>
For better understanding about ng-repeat etc. please go though this link https://www.w3schools.com/angular/ng_ng-repeat.asp
Hope it helps
I want to make an editor of files. By the following code (JSBin), we list all the file names on the left hand, and their body on the right hand. I use ui-codemirror to style the body of the files.
However, when we click on the file names and switch from one to another, from time to time, we could see the quick flick from a textarea to a codemirror frame, which is not a good experience for an editor.
Does anyone have a solution to avoid the flick? Addtionally, is it a good direction to make an editor by angularJS and ui-codemirror?
<html ng-app="flapperNews">
<head>
<link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://codemirror.net/mode/xml/xml.js"></script>
<script src="https://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="https://codemirror.net/mode/javascript/javascript.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.0/ui-bootstrap-tpls.js"></script>
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.config(['$stateProvider', function ($stateProvider) {
$stateProvider
.state('file', {
template: '<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
controller: 'FileCtrl',
params: { name: null }
})
}]);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.files = [
{ name: "index.html", body: "<html><body>index.html</body></html>" },
{ name: "index.js", body: "the body of index.js" },
{ name: "test.html", body: "the body of test.html" }];
}]);
app.controller('FileCtrl', ['$scope', '$stateParams', function ($scope, $stateParams) {
$scope.file = $scope.files.find(function (file) { return file.name === $stateParams.name });
$scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
}]);
</script>
</head>
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ui-sref="file({name: file.name})">{{file.name}}</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
Every time you click on the link, it is creating new editor, which is an expense operation.
The best approach is to create one editor and load the content on every click.
so I removed the ui-router linking (ui-sref) and related controllers
<script>
var app = angular.module('flapperNews', ['ui', 'ui.router']);
app.controller('MainCtrl', ['$scope', '$state', function ($scope, $state) {
$scope.files = [
{ name: "index.html", body: "<html><body>index.html</body></html>" },
{ name: "index.js", body: "the body of index.js" },
{ name: "test.html", body: "the body of test.html" }];
$scope.editorOptionsHTML = { mode: 'text/html', lineNumbers: true, matchBrackets: true };
// for every click event it will load the content
$scope.go=function(file){
$scope.file=file;
}
}]);
and the body
<body ng-controller="MainCtrl">
<div class="row">
<div class="col-sm-3 col-md-3 col-xl-3 col-lg-3">
<div ng-repeat="file in files track by $index">
<a ng-click="go(file)">{{file.name}}</a>
</div>
</div>
<div class="col-sm-9 col-md-9 col-xl-9 col-lg-9">
<textarea ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>
</div>
</div>
</body>
Example : JSBin
you could avoid the flick by adding hide class to textarea like the following code ( jsbin )
template: '<textarea class="hide" ui-codemirror="editorOptionsHTML" ng-model="file.body"></textarea>',
I am trying to use masonry in my application. Following is my component template.
<template>
<div>
<section class="section">
<div class="container">
<div class="row team">
<div class="col-md-4 col-sm-6 member" v-for="team in teamMembers">
<div class="team__item">
<div class="team__info">
<h4>{{team.name}}</h4>
<small>{{team.title}}</small>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</template>
<script src="https://unpkg.com/masonry-layout#4.1.1/dist/masonry.pkgd.min.js"></script>
<script>
export default {
data() {
return {
teamMembers: []
}
},
mounted() {
this.getTeamMembers();
},
methods : {
getTeamMembers : function() {
this.$http.get('teamMembers').then(response =>{
// console.log(response);
if(response.data.status=200) {
this.teamMembers = response.data.teamMembers;
this.$nextTick(function() {
var $container = $('.team');
$container.masonry({
columnWidth: '.member',
itemSelector: '.member'
});
})
}
})
}
}
}
</script>
I get the following error whenever the view is getting rendered.
TypeError: $container.masonry is not a function
Can you please let me know what I am doing wrong here ?
You can get vue component DOM element by this.$el. So you can do the following:
$(this.$el.querySelector('.team')).masonry({
columnWidth: '.member',
itemSelector: '.member'
});
But remember this is valid as long as your component is not a Fragment Instance i.e. it has a single root HTML tag.
You many need to put following script line in index.html, so that it loads properly.
<script src="https://unpkg.com/masonry-layout#4.1.1/dist/masonry.pkgd.min.js"></script>
When trying to access the root page I get a blank screen with no layout. I check developer tools and get an error in App.jsx
Uncaught TypeError: Cannot read property 'loggedIn' of undefined
This is my App component:
App = React.createClass({
mixin: [ReactMeteorData],
getMeteorData() {
return {
loggedIn: !!Meteor.user()
};
},
showLayout() {
return (
<div className="container-fluid main-container">
<div className="col-xs-3">
{this.props.nav}
</div>
<div className="col-xs-9">
{this.props.content}
</div>
</div>
)
},
showLogin() {
return (
<div className="row">
<div className="col-xs-12 text-center">
<p>You must be logged in to do that.</p>
</div>
<Login />
</div>
)
},
render() {
return(
<div className="container-fluid main-container">
<div className="row">
{ this.data.loggedIn ? this.showLayout() : this.showLogin() }
</div>
</div>
)
}
});
I'm not sure what the issue can be, I'm following along a tutorial.
You should have this:
mixins: [ReactMeteorData],
instead of this:
mixin: [ReactMeteorData],
(Note the 's')