I am trying to capture the month and year when the "prev" or "next" buttons are clicked on the primeng p-fullcalendar. I tried (viewRender)="fetchEvents($event)", but its not firing the fetchEvents function. Anybody has any ideas? Thanks.
Here is my html code:
<div class="col-8">
<p-fullCalendar #fc [events]="meetingList" [options]="options" (viewRender)="fetchEvents($event)"></p-fullCalendar>
</div>
Here is the ts code:
meetinglist: any;
ngOnInit() {
this.meetingList = [
{
"title": "Meeting-1",
"start": "2019-02-12"
},
{
"title": "Meeting-2",
"start": "2019-02-14"
},
{
"title": "Appointment-1",
"start": "2019-02-16"
},
];
this.options = {
defaultDate: '2019-02-10'
,height: 'parent'
}
}
public fetchEvents(e) {
console.log(e);
}
How do I get the month and year when the prev or next button is clicked on the p-calendar?
Thanks!
I think you can use this;
https://stackblitz.com/edit/github-qqwdyk?file=src%2Fapp%2Fapp.component.ts
to get the Month and Year on prev and next clicks:
console.log(this.fullCalendar.calendar.view.title);
Related
I want to hide the selected option in the Dropdown, the option should not appear in the next dropdown. For an example, there are 2 dropdowns, in the first dropdown - i have selected "Hockey" then "hockey" should not be shown in the second dropdown, It should show only "Baseball and badminton".
My JSON data will be appearing in this way:
"details": [
{ "id": "12wer1", "name": "ABC", "age": 15, "game": "badminton" },
{ "id": "78hbg5", "name": "FRE", "age": 21, "game": "Hockey" }
]
Here is the sample Code:
let games = [{ game: "Baseball"}, { game: "Hockey"}, { game: "badminton" }];
class Field extends React.Component {
constructor(props) {
super(props);
this.state = {
details: [{id: '', name: '', age: '', game: ''}]
}
}
...
...
render() {
return (
...
...
{this.state.details.map((y) => (
<Autocomplete
style={{ witdth: 200 }}
options={games}
getOptionLabel={(option) => option.game}
onChange={(value) =>this.onGameChange(value, y.id)}
value={games.filter(i=> i.game=== y.game)}
renderInput={(params) =>
<TextField {...params} label="Games" margin="normal" />
}
/>))}
...
...
)
}
}
onGameChange = (e, id)=> {
let games = this.state.details;
let data = games.find(i => i.id === id);
if (data) {
data.game = value.game;
}
this.setState({ details: games });
}
I have no idea, how to hide the selected option, can anyone help me in this query?
Thanks! in advance.
A possible solution would be to
create an array and store the values in an array when the user selects autocomplete
while passing options, filter the values that have been passed to other autocompletes.
const ary = [111,222,333];
let obj = [{id: 111},{id: 222}];
const i = 1; // this is your index in loop
const ary2 = ary.slice()
ary2.splice(i,1);
console.log(obj.filter((o) => !ary.includes(o.name))); // this should be given to our options list in autocomplete
you can hide this is in CSS easily no need to do anything in ReactJS
autocomplete renders as an unordered list so something like this
.panel > ul > li:first-child {
display:none;
}
I am trying to implement the List template feature of Alexa skill kit. However, I am unable to return the response in an appropriate format.
I have implemented the feature using the official documentation. However, I am not getting how to return the response of list template to my custom intent
'ListTemplate':function(){
var title = "This is a sample list";
var speechOutput = "Showing the sample list";
var template = {
"type":"Display.RenderTemplate",
"template":{
"type":"ListTemplate1",
"token":"ListTemplate",
"title":title,
"backButton":"VISIBLE",
"backgroundImage":{
"contentDescription":"backgroundImage",
"sources":[
{
"url":"https://democard.s3.amazonaws.com/hostel-720.jpg"
}]
},
"listItems":[{
"token":"item1",
"image":{
"sources":[{
"url":"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
"contentDescription":"first item of list"
},
"textContent":{
"primaryText":{
"type":"PlainText",
"text":"primary Text is here"
},
"secondaryText":{
"type":"PlainText",
"text":"Secondary text is here"
}
},
},
{
"token":"item2",
"image":{
"sources":[{
"url":"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
"contentDescription":"second item"
},
"textContent":{
"primaryText":{
"type":"PlainText",
"text":"primary text is here"
},
"secondaryText":{
"type":"PlainText",
"text":"secondary text"
}
}
}
]
}};
var directives =[ template ];
//return build_speechlet_response(title,speechOutput,directives, SESSION_LIST);
// function
build_speechlet_response(title,speechOutput,directives,phase){
const response = {
"version": "1.0",
"response": {
"outputSpeech":{
"type":"PlainText",
"text":"what else would you like to see"
},
"card":{
'type':'Simple',
'title':title,
'content':speechOutput
},
"directives":directives,
"shouldEndSession":'False'
},
"sessionAttributes":{
"template":"list_"
}
};
// return response;
this.emit(':tell',response);
},
The response I should get must be a custom list. But I am not getting it
It looks like this issues is that response is an object. It should be something like this.emit(':tell', speechOutput) (where speechOutput is a string).
If you want to also send a card it's this.emit(':tellWithCard', speechOutput, cardTitle, cardContent, imageObj).
But, since you're trying to use a render template, it would be something like:
this.response.speak(speechOutput)
.cardRenderer(cardTitle, cardContent, cardImage)
.renderTemplate(template);
this.emit(':responseReady');
You can find more info here - https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs/tree/1.x
I do notice you're using v1 of the SDK - I would really recommend using v2 as it's a lot more straight forward.
https://github.com/alexa/alexa-skills-kit-sdk-for-nodejs
Hope that helps.
I tried the following code yet the response was not rendered.
const DisplayListIntentHandler = {
canHandle(handlerInput){
return handlerInput.requestEnvelope.request.type === 'IntentRequest'
&& handlerInput.requestEnvelope.request.intent.name === 'DisplayList';
},
handle(handlerInput){
var title = "This is a sample list";
var speechOutput = "Showing the sample list";
var template = {
type:'Display.RenderTemplate',
template:{
type:"ListTemplate1",
token:"ListTemplate",
title:'title',
backButton:"VISIBLE",
backgroundImage:{
contentDescription:"backgroundImage",
sources:[
{
url:"https://democard.s3.amazonaws.com/hostel-720.jpg"
}]
},
listItems:[{
token:"item1",
image:{
sources:[{
url:"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
contentDescription:"first item of list"
},
textContent:{
primaryText:{
type:"PlainText",
text:"primary Text is here"
},
secondaryText:{
type:"PlainText",
text:"Secondary text is here"
}
},
},
{
token:"item2",
image:{
sources:[{
url:"https://democard.s3.amazonaws.com/c-v-raman-college-of-engineering-squarelogo-1534916004379+(3).jpg"
}],
contentDescription:"second item"
},
textContent:{
primaryText:{
type:"PlainText",
text:"primary text is here"
},
secondaryText:{
type:"PlainText",
text:"secondary text"
}
}
}
]
}};
return handlerInput.responseBuilder
.addRenderTemplateDirective(template)
.getResponse();
}
};
Having a JQuery Datatable (it's more complex I simplified it) as below:
I need to display a bootstrap modal form with a text input field on, whenever I click the "Assign Card" button.
The modal should should be populated with the data coming from the row in which the button was clicked.
Upon clicking the modal "Assign" button, normally I should post the inputed value and the "VisitorID" which like "John Doe" should come from the specific row.
On Assign I should post the "input value" and "VisitorID".
What I have so far:
var table = $('#visitorsTable').DataTable({
"ajax": {
...
},
"columns": [
{ "data": "VisitorID" },
{ "data": "FirstName" },
{ "data": "LastName" },
{
"data": "CheckedIn",
"render": function(d) {
return moment(d).format('DD-MM-YYYY HH:mm');
}
},
{"data": "CardNumber"},
],
columnDefs: [
{
targets: [0], // Visitor ID
visible: false
},
{
targets: [-1],
render: function(cardNUmber, b, data, d) {
return '<button class="btnAssignCard data-toggle="modal" data-target="#assignCardModal" float-right">Assign Card</button>';
}
}
]
});
$('#visitorsTable').on('click',
'.btnAssignCard',
event => {
// THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
let rowData = table.row($(event.target).parents('tr')).data();
var visitorID = rowData.VisitorID;
var visitorFirstName = rowData.FirstName;
var visitorLastName = rowData.LastName;
});
});
Remove the data-toggle and data-target from the button.
Then call the below function after
// THIS IS HOW I GET ACCESS TO THE SPECIFIC ROW
let rowData = table.row($(event.target).parents('tr')).data();
var visitorID = rowData.VisitorID;
var visitorFirstName = rowData.FirstName;
var visitorLastName = rowData.LastName;
showMyModalSetInput(visitorFirstName + visitorLastName,visitorID );
The function will open the modal and pass the required values before opening. Also, for visitor id, you can add an extra hidden input.
function showMyModalSetInput(inputText, visitorID) {
$('#inputId').val(inputText);
$('#hiddenInputforVisitorID').val(visitorID);
$('#assignCardModal').modal('show');
}
I'm using datatable , I need to disable the export buttons(Excel, PDF) when the grid having the empty rows.
How can we handle the datatable export buttons click actions?
I have done the grid initialization as below.
I don't know how to handle the datatable export buttons(PDF, Excel).
Can you please help me how to fix this.
Update:
And I have one more issue that when user click on the Excel or PDF button then the grid columns width is collapsing.
I need even user click on the Excel or PDF buttons the grid column width should not change. How can we achieve this?
After exporting the data in to excel, columns are not auto adjusted in the excel.
How can we make the columns(After export datatable data into excel) auto adjusted?
var buttonCommon = {
exportOptions: {
format: {
body: function(data, column, row, node) {
return data;
}
}
}
};
var dataTableObj = {
"processing": true,
"destroy": true,
"scrollX": true,
"columns": [{
"data": "CollegeName",
"width":"30%"
}, {
"data": "AffiliatedTo",
"width":"15%"
}, {
"data": "TPOName",
"width":"20%"
}, {
"data": "Phone",
}, {
"data": "Website",
"bSortable": false
}],
dom: 'lBfrtip',
buttons: [
$.extend( true, {}, buttonCommon, {
extend: 'excelHtml5',
title: 'Colleges',
} ),
{
extend: 'pdf',
title: 'Colleges'
}
],
fnRowCallback: function(nRow, aData, iDisplayIndex) {
//Some code
return nRow;
}
};
var dataTbl = $('#tblColleges').DataTable(dataTableObj);
I don't know how far following solution makes sense but it was resolved my issue.
I need to disable the export buttons(Excel, PDF) when the grid having
the empty rows. How can we handle the datatable export buttons click
actions?
here I have done with the datatables action property.
buttons: [{
extend: 'excelHtml5',
title: 'Colleges',
action: function(e, dt, button, config) {
if (this.data().length > 0) {
$.fn.dataTable.ext.buttons.excelHtml5.action(e, dt, button, config);
$scope.hasAlert = 0;
$scope.$apply();
} else {
$scope.hasAlert = 2;
$scope.alertMsg = __APP_MESSAGE__.GridEmptyMsg;
$scope.$apply();
}
}
}, {
extend: 'pdf',
title: 'Colleges',
action: function(e, dt, button, config) {
if (this.data().length > 0) {
$.fn.dataTable.ext.buttons.pdfHtml5.action(e, dt, button, config);
$scope.hasAlert = 0;
$scope.$apply();
} else {
$scope.hasAlert = 2;
$scope.alertMsg = __APP_MESSAGE__.GridEmptyMsg;
$scope.$apply();
}
}
},
]
This solution has worked for me put it in fnDrawCallback function
$(tableName).dataTable({
"fnDrawCallback":function () {
var table = $(tableName).DataTable();
if (table.data().length === 0)
table.buttons('.buttons-html5').disable();
else
table.buttons('.buttons-html5').enable();
}
});
The easiest way to handle the datatable export buttons click actions is to create your own button and trigger the datatable export button on the click of your button.
This way you will handle the click actions of your created button:
$('#exportBtn').on('click', function () {
dataTbl.button(0).trigger();
});
You can remove dom: 'lBfrtip' to hide the original datatable button.
I'm showing current time on a button in Sencha-2. Time is updating but only once.
I want continuous updation
Below is my code:-
Ext.define("Stackoverflow.view.Demo", {
extend: "Ext.Container",
alias: "widget.demo",
config: {
items: [{
xtype: "toolbar",
id: 'clocktool',
docked: "bottom",
items: [
{
xtype: 'button',
itemId: "clock",
id:'clock',
text: Ext.Date.format(new Date(),'g:i:s A')
}
]
}]
},
initialize: function(){
console.log("initializing main view");
Ext.defer(this.refreshDate, 1000, this);
},
refreshDate: function() {
console.log("refreshing date");
var btn = Ext.getCmp('clock');
btn.setText(Ext.Date.format(new Date(),'g:i:s A'));
console.log("done");
}
});
Thanks in advance. Any other approach for showing the time in sencha-2 is also welcomed.
When the view that contains the button initiates, just do something like this :
Ext.defer(this.refreshDate, 1000, this);
Then juste create a function called refreshDate :
refreshDate: function() {
var btn = ... // get your button
btn.setText(Ext.Date.format(new Date(),'g:i:s A'));
Ext.defer(this.refreshDate, 1000, this);
}
Hope this helps