Fullcalendar month view how to add a custom column - fullcalendar

There are way to add a custom/total column in a month view?

eventAfterAllRender: function (view) {
$(view.headRowEl).find('tr > .cc-total').remove();
$(view.el).find('td.fc-day-number').closest('tr').find('.cc-total').remove();
$(view.headRowEl).find('tr').append('<th class="fc-day-header fc-widget-header fc-sun cc-total">Total</th>');
$(view.el).find('td.fc-day-number').closest('tr').append('<td class="cc-total"></td>');
var rows = $(view.el).find('.fc-row.fc-week');
for (var i = 0; i < rows.length; i++) {
$(rows[i]).find('td.fc-day').closest('tr').find('.cc-total').remove();
$(rows[i]).find('td.fc-day').closest('tr').append('<td class="cc-total" style="vertical-align: middle;" align="center"><b>' + total + '</b></td>');
}
}

Related

Conditional css class with if in razor

Hi i have question about Razor.
I want to conditional class using if statment but i have a weird result, let me show:
#{ var row_odd = false; }
#for (int y = 0; y <= Model.Count() - 1; y++)
{
<div class='at-column-item #if (row_odd) { #("at-column-item-odd") }'>#row_odd</div>
row_odd = !row_odd;
}
If i run this code i always have the at-column-item-odd inserted in all the divs.
But if I use this code i have the rigth result:
#{ var row_odd = false; }
#for (int y = 0; y <= Model.Count() - 1; y++)
{
<div class='at-column-item #(row_odd ? "at-column-item-odd" : "")'>#row_odd</div>
row_odd = !row_odd;
}
I'm trying to find why the if statment does not work correctly in the string of the css, because if i move to another place work perfectly.
Any idea?

Selecting and Setting Style to DataGridColumn after passing the DataProvider

I have a Datagrid thats being populated by different Arrays... (headers/columns change for the same DataGrid)...
I would like to Select a Column of the Datagrid after it was generated by the Dataprovider and Bold it, and place it as the 'last column"
This is what I have.... and throwing an error:
private function populateGrid(evt:Object):void {
dg.dataProvider = evt as Array;
if (dg.columns.length > 0) {
for (var i:int = 0; i < dg.columns.length; i++) {
if (dg.columns[i].dataField == '_user_total') {
DataGridColumn((dg.columns[i].dataField)).setStyle('fontWeight', 'bold');
}
}
}
}
This way I would like to have One Datagrid (for different Arrays) )without having the Columns fixed and declared (like in MXML), but dynamic, and would like a 'specific' column to be Bolded, and placed as the last column, in this example, the column with dataField _user_total.
private function populateGrid(evt:Object):void {
dg.dataProvider = evt as Array;
if (dg.columns.length > 0) {
for (var i:int = 0; i < dg.columns.length; i++) {
if (dg.columns[i].dataField == '_user_total') {
(dg.columns[i]).setStyle('fontWeight', 'bold');
}
}
}
}
So the code above does it for me
After finding the Column in question dynamically... we bold it!

Get a listbox's selected items in javascript

I have two listboxes in asp.net. On the click of a button I want to load a list box with the elements of the selected items in the other box. The problem is that this has to be done on the client side because when the button is clicked I don't allow it to submit. I want to call a javascript function onselectedindexchange but that is server side. any ideas? Should i be more clear?
Solution
enter code here
function Updatelist() {
var sel = document.getElementById('<%=ListBox1.ClientID%>')
var lst2 = document.getElementById('<%=ListBox2.ClientId %>')
var listLength = sel.options.length;
var list2length = lst2.options.length;
for (var i = 0; i < listLength; i++) {
if (sel.options[i].selected) {
//lst2.options.add(sel.options[i].text);
lst2.options[list2length] = new Option(sel.options[i].text);
list2length++;
}
}
}
Try:
//onclick for button calls this function
function Updatelist() {
var sel = document.getElementbyId("list1");
var listLength = sel.options.length;
for(var i=0;i<listLength;i++){
if(sel.options[i].selected)
document.getElementById("list2").add(new Option(sel.options[i].value));
}
more precisely we can do it like;
function selectedVal(list) {
alert(list.options[list.selectedIndex].text);
}
<select id="listbox" multiple="multiple"
style="height: 300px; width: 200px;"
onclick="javascript:selectedVal(this);">
</select>
Here is a good article on how to do this using Jquery.
You could also stick your drop downs in an Update Panel.
function Updatelist() {
var sel = document.getElementById('<%=ListBox1.ClientID%>')
var lst2 = document.getElementById('<%=ListBox2.ClientId %>')
var listLength = sel.options.length;
var list2length = lst2.options.length;
for (var i = 0; i < listLength; i++) {
if (sel.options[i].selected) {
//lst2.options.add(sel.options[i].text);
lst2.options[list2length] = new Option(sel.options[i].text);
list2length++;
}
}
}

save state of a dataGrid: visible columns, columns width and order

I want to save remotely (on a database) the state (visible columns, columns width and order) of a Flex3 DataGrid.
For width and visibility I can simply save them by accessing each column attribute.. ugly but possible..
But for the order? Do I have to create the dataGrid dynamically??
Any idea is appreciated
thanks
In my case I have saved the order by header name (I'm making an assumption that your DataGrid always has the same columns and header names).
for (var n:Number = 0; n< datagrid.columns.length; n++)
{
var thiscol:DataGridColumn = DataGridColumn(datagrid.columns[n]);
colArray.addItem(thiscol.headerText);
}
Then I can restore the column order by retrieving the ordered list of column headers, and swapping the position of columns in the datagrid as required.
for (var n:Number = 0; n < colArray.length; n++)
{
moveColumnTo(String(colArray.getItemAt(n)), n);
}
I have defined a function moveColumnTo() to perform the switch.
private function moveColumnTo(columnName:String, columnIndex:Number):void
{
// Find current column position
var i:Number = -1;
for (var n:Number = 0; n < datagrid.columns.length; n++)
{
if (DataGridColumn(datagrid.columns[n]).headerText == columnName)
{
i = n;
break;
}
}
if (i == -1 || i == columnIndex) return; // Don't shift column
this.mx_internal::shiftColumns(i, columnIndex); // Shift column to required position
}
Why can't you just save the order as you're looping through each column?
for(var i:int = 0; i < dataGrid.columns.size; i++)
{
var column:DataGridColumn = dataGrid.columns[i];
arr.push({column.visible, column.width, i});
}

jQuery with ASP.NET - How to Create, Populate, and Show UL

In an ASP.NET web app, I am trying to create and populate a UL based on user input. This is not a quick fill. User enters a couple of letters, clicks a button, and the server returns all records like the entry. If there is more than one match, an UL is created showing all of the matches.
I've tried to adapt this code from a plugin. I can step through it with the debugger and everything seems OK, but the UL is either not generated to the document or it is invisible.
Here is the simplified code:
function fillBusinessDropdown(ListOfBusinesses) {
var results = document.createElement("div");
var $results = $(results);
$results.hide().addClass("ac_results").css("position", "absolute");
if ($.browser.msie) {
$results.append(document.createElement('iframe'));
}
results.appendChild(businessToDom(ListOfBusinesses));
$results.css({
width: 400 + "px",
top: 100 + "px",
left: 150 + "px"
}).show();
function businessToDom(ListOfBusinesses) {
var ul = document.createElement("ul");
var iLen = ListOfBusinesses.length - 1
for (var i = 0; i <= iLen; i++) {
var row = ListOfBusinesses[i];
if (!row) continue;
var li = document.createElement("li");
// add the business name
li.innerHTML = row.Bu_name;
// add the business ID
li.selectValue = row.Bupk;
var extra = null;
if (row.length > 1) {
extra = [];
for (var j = 1; j < row.length; j++) {
extra[extra.length] = row[j];
}
}
li.extra = extra;
ul.appendChild(li);
$(li).hover(
function() { $("li", ul).removeClass("ac_over");
$(this).addClass("ac_over"); active = $("li", ul).indexOf($(this).get(0)); },
function() { $(this).removeClass("ac_over"); }
).click(function(e) { e.preventDefault(); e.stopPropagation(); selectItem(this) });
}
return ul;
}
I am stumped. Does any0oe have any ideas where I've gone wrong?
Thanks
Mike Thomas
Not sure what is wrong with that code but you are using a mixture of javascript and Jquery. I suggest use JQuery all the time instead. Use .appendTo() etc

Resources