Can you please let me know if there any way to customize the cell template in week view?
Currently I'm using something like:
<mwl-calendar-week-view
*ngSwitchCase="CalendarView.Week"
[viewDate]="viewDate"
[events]="events"
[refresh]="refresh"
(eventClicked)="dayEventClicked($event.event)"
(eventTimesChanged)="eventTimesChanged($event)"
[eventTemplate]="customCellTemplateWeekly">
</mwl-calendar-week-view>
<ng-template #customCellTemplateWeekly let-day="day" let-locale="locale">
---------
</ng-template>
But I'm not getting the events inside the ng-template so that I can render it accordingly.
Am I doing something wrong here?
Related
I'm using angular-google-map.I wanted to add custom directive( other than agm specified directive) to show tooltip on hover of polylines.
I tried applying custom directive but no effects are shown in the map.tooltip for normal html like select,h4 works.
please tell me whether we can apply custom directive or not.if yes then how.Below is my code
<agm-map [latitude]="lat" [longitude]="lng" [scrollwheel]="false" [zoom]="zoom" [styles]='mapStyles'>
<ng-container>
<agm-marker-cluster
imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
<agm-marker *ngFor="let m of markers; let i = index" (markerClick)="clickedMarker(m.label, i)"
[latitude]="m.lat" [longitude]="m.lng" [label]="{color: 'white', text: m.title}"
[markerDraggable]="m.draggable" [iconUrl]="m.icon" (dragEnd)="markerDragEnd(m, $event)">
</agm-marker>
</agm-marker-cluster>
<agm-polyline (lineMouseOver)="clickedLine(i,polyline.data)" *ngFor="let polyline of polylines;let i = index;"
[strokeColor]="polyline.color" tooltip="this is is tooltip" >
<agm-polyline-point *ngFor="let point of polyline.path" [latitude]="point.latitude"
[longitude]="point.longitude">
</agm-polyline-point>
</agm-polyline>
</ng-container>
</agm-map>
No, because agm-polyline is not a component, it's a directive, even though it looks like an html element. This means that there is no host to bind the directive to.
I am looking to update a specific div that can change depending on the stream.id.
I have the following :
ActionCable.server.broadcast('webconferencier_channel', participants_html: participants_html, stream_id: webconferencier.stream_id)
Where I do pass the stream_id.
I am looking to retrieve it in coffee file like this:
received: (data) ->
# Called when there's incoming data on the websocket for this channel
participantsHtml = data.participants_html
$('#show_participants' + data.stream_id).html(participantsHtml);
And then update the view as:
<div id="show_participants_#{<%= #stream.id %>}">
</div>
I can see the AC sending the div template with the other variables, but i cannot seem to retrieve and update it. I think my coffee syntax is incorrect.
In the view, the div id show up as :
<div id="show_participants_#{67089dbd-9826-41f2-97bc-b774b667ef66}">
</div>
with the UUID being the exact same string that i am passing through the coffee file.
Does anyone know how i could make this work please?
Thank you
You should remove curly braces and octothorp from div's id like show_participants_UUID.
You can add console.log to the coffee to see what's happening inside.
Update 2: A The following repo on github shows the problem.
Update 1: Calling #firstNode in Template.editor.rendered returns <div class="editor"></div>.
I have the following template:
<template name="editor">
<div class="editor">
{{#each objects}}
<div class="object">{{content}}</div>
{{/each}}
</div>
</template>
The data is provided by iron-router in the data callback.
The coffeescript for my template:
Template.editor.rendered = ->
#findAll('.object').draggable()
When I go into my browser and try to drag one of the objects I get the text selection cursor and begin to select the text with the div instead of the object being dragged. So what is wrong and how can I get the drag and drop to work?
The drag and drop functionality is being provided by jquery-ui. Which is installed as a smart package.
Also feel free to edit the title of this post as I had a tough time coming up with one that made sense
The solution I found was to abstract <div class="object">{{content}}</div> into a seperate template like so:
<template name="object">
<div class="object">{{content}}</div>
</template>
Then change
Template.editor.rendered = ->
#findAll('.object').draggable()
to
Template.object.rendered = ->
#findAll('.object').draggable()
As stated in meteorpedia.
I`m trying to create a widget for dashing (http://shopify.github.io/dashing/) for displaying 4 values:
value1
value2
value3
value4
I have copied the contents of the text widget and added the following to the widget.html
<h3 data-bind="text | raw"></h3>
<p class="more-info" data-bind="moreinfo | raw"></p>
<p class="value1" data-bind="value1"></p>
<p class="value2" data-bind="value2"></p>
<p class="value3" data-bind="value3"></p>
<p class="value4" data-bind="value4"></p>
<p class="updated-at" data-bind="updatedAtMessage"></p>
When I add this widget to my dashboard using:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="mywidget" data-view="mywidget" data-title="Grupserhs" data-text="Systems Dashboard" data-moreinfo="Hello"></div>
</li>
Yet I have a blank page in my dashboard.
What would be the correct way to create a widget that will only receive pushed data?
Thanks in advance.
Actually use "list" widget for this. Look at the 'buzzwords.rb' file for an idea.
Do you have a coffeeScript file that defines your widget class and extends Dashing.Widget? You don't need anything else in there to start, but that is where your widget is defined.
Also, do you have a job pushing data to this widget id "mywidget"? If not, look in the jobs folder, same level as widgets folder to get an idea, basically a Rufus scheduler task to pump data to your widgets. ..and don't forget to check the css for your widget..
From the current information, in the dashboard, it shall using like
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<div data-id="mywidget" data-view="mywidget" data-title="Grupserhs" data-text="Systems Dashboard" data-moreinfo="Hello" data-value1="first value" data-value2="this is value2" data-value3="value3" data-value4="last value" ></div>
</li>
The data-bind="value1" shall be mapped into dashboard like data-value1
It may have other problems, like putting those widget in separate folder, your css format. Please provide more detail file list for reference if it can't solve it.
I'm trying to use jquery-ui sortable with nested templates in Meteor, as follows. Here are the two templates in question:
<template name="activityEditor">
{{! the main activity editor view }}
<div class="activity-editor">
<input type="text" name="title" class="input-xxlarge" value="{{info.title}}" placeholder="Type a title here...">
<div class="activity-steps">
{{#each info.steps}}
{{>activityStepEditor}}
{{/each}}
</div>
</div>
</template>
<template name="activityStepEditor">
{{! the container view for each step editor }}
<div class="activity-step" data-id="{{_id}}">
<div class="order">{{order}}</div>
{{!....stuff...}}
</div>
</template>
and the template code (using coffeescript):
_.extend Template.activityEditor, {
# ...stuff...
rendered: ->
$(".activity-steps").sortable {
items: '.activity-step'
handle: '.order'
update: ->
stepIds = ($(el).attr('data-id') for el in $('.activity-step'))
$('.activity-steps').empty() #this must be done in order to steps to re-render properly
Lab.Activity.reorderSteps stepIds
}
$(".activity-steps").disableSelection()
}
The only way I can get this code to work and properly rerender the order is by emptying the container of my sortable elements right after they update with $('.activity-steps').empty(). I've tried cancelling the update event and forcing a rerender by changing another variable watched in the context, but any change causes Exception from Meteor.flush(): undefined after which I can't rerender anything until page reload.
This seems to work, and everything rerenders great. So my question is: is there any reason why I shouldn't do this? Is there a better, standard practice way to handle the sortable that I'm not seeing?
In the near future there'll be a better way to do it, as Meteor team is developing its new rendering engine: http://youtube.com/watch?v=ISNEhPG0wnA
(in this video, Avital Oliver shows exactly a way to do it without redrawing the screen: the object in the list is actually moved on all clients)
See this Meteor's Github Wiki entry for more technical info:
http://github.com/meteor/meteor/wiki/New-Template-Engine-Preview
While that's not officially published, if you need it right now, you could try Nazar Leush's approach:
http://github.com/nleush/meteor-todos-sortable-animation
He also published a working example here: http://todos-dnd-animated.meteor.com